<template>
  <div class="designer-properties">
    <div class="property-panel">
      <el-tabs v-model="activeTab">
        <el-tab-pane
          :label="t('formDesigner.propertyPanel.tabs.component')"
          name="component"
        >
          <div v-if="selectedItem">
            <!-- 组件类型显示 -->
            <el-form label-width="90px" size="small">
              <el-form-item
                :label="t('formDesigner.propertyPanel.basic.componentType')"
              >
                <el-input :value="getComponentTypeName()" readonly disabled />
              </el-form-item>
            </el-form>

            <!-- 普通组件配置（包括栅格子组件） -->
            <div v-if="selectedItem && !isGridColumnSelected">
              <el-collapse v-model="activeCollapse" accordion>
                <!-- 基础配置 -->
                <el-collapse-item
                  :title="t('formDesigner.propertyPanel.basic.title')"
                  name="basic"
                  v-if="
                    selectedItem.type !== 'grid' &&
                    selectedItem.type !== 'descriptions'
                  "
                >
                  <el-form label-width="90px" size="small">
                    <el-form-item>
                      <template #label>
                        <span style="display: flex; align-items: center">
                          <el-popover
                            placement="top"
                            width="200"
                            trigger="hover"
                            :content="
                              t(
                                'formDesigner.propertyPanel.basic.fieldIdTooltip'
                              )
                            "
                          >
                            <template #reference>
                              <el-icon
                                style="
                                  color: #909399;
                                  cursor: help;
                                  margin-right: 4px;
                                "
                              >
                                <QuestionFilled />
                              </el-icon>
                            </template>
                          </el-popover>
                          <span>{{
                            t("formDesigner.propertyPanel.basic.fieldId")
                          }}</span>
                        </span>
                      </template>
                      <el-input
                        v-model="selectedItem.field"
                        :placeholder="
                          t('formDesigner.propertyPanel.placeholders.fieldId')
                        "
                      />
                    </el-form-item>
                    <el-form-item
                      :label="t('formDesigner.propertyPanel.basic.fieldName')"
                    >
                      <el-input
                        v-model="selectedItem.label"
                        :placeholder="
                          t('formDesigner.propertyPanel.placeholders.fieldName')
                        "
                      />
                    </el-form-item>
                    <el-form-item
                      :label="t('formDesigner.propertyPanel.basic.labelWidth')"
                    >
                      <div class="label-width-input">
                        <el-input
                          v-model="labelWidthNumber"
                          :disabled="currentLabelWidthUnit === 'auto'"
                          :placeholder="
                            getPlaceholderByUnit(currentLabelWidthUnit)
                          "
                          class="width-number-input"
                        />
                        <div
                          class="unit-selector"
                          @click="switchUnit"
                          :title="
                            t(
                              'formDesigner.propertyPanel.basic.clickToSwitchUnit'
                            )
                          "
                        >
                          {{ currentLabelWidthUnit }}
                        </div>
                      </div>
                    </el-form-item>
                    <el-form-item
                      :label="t('formDesigner.propertyPanel.basic.placeholder')"
                      v-if="
                        selectedItem.type !== 'radio' &&
                        selectedItem.type !== 'checkbox' &&
                        selectedItem.type !== 'switch' &&
                        selectedItem.type !== 'tree' &&
                        selectedItem.type !== 'slider'
                      "
                    >
                      <el-input
                        v-model="selectedItem.placeholder"
                        :placeholder="
                          t(
                            'formDesigner.propertyPanel.placeholders.placeholder'
                          )
                        "
                      />
                    </el-form-item>
                  </el-form>
                </el-collapse-item>

                <!-- 属性配置 -->
                <el-collapse-item
                  :title="t('formDesigner.propertyPanel.properties.title')"
                  name="properties"
                >
                  <el-form label-width="90px" size="small">
                    <!-- 各组件共有属性 -->
                    <el-form-item
                      :label="
                        t('formDesigner.propertyPanel.properties.disabled')
                      "
                      v-if="
                        selectedItem.type != 'tree' &&
                        selectedItem.type !== 'grid' &&
                        selectedItem.type !== 'descriptions'
                      "
                    >
                      <el-switch v-model="selectedItem.disabled" />
                    </el-form-item>

                    <!-- 输入框特有属性 -->
                    <template v-if="selectedItem.type === 'input'">
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.input.inputType')"
                      >
                        <el-select
                          v-model="selectedItem.inputType"
                          :placeholder="
                            t(
                              'formDesigner.propertyPanel.placeholders.selectInputType'
                            )
                          "
                        >
                          <el-option
                            :label="
                              t('formDesigner.propertyPanel.input.types.text')
                            "
                            value="text"
                          />
                          <el-option
                            :label="
                              t(
                                'formDesigner.propertyPanel.input.types.password'
                              )
                            "
                            value="password"
                          />
                          <el-option
                            :label="
                              t('formDesigner.propertyPanel.input.types.email')
                            "
                            value="email"
                          />
                          <el-option
                            :label="
                              t('formDesigner.propertyPanel.input.types.number')
                            "
                            value="number"
                          />
                          <el-option
                            :label="
                              t('formDesigner.propertyPanel.input.types.tel')
                            "
                            value="tel"
                          />
                          <el-option
                            :label="
                              t('formDesigner.propertyPanel.input.types.url')
                            "
                            value="url"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.input.maxLength')"
                      >
                        <el-input-number
                          v-model="selectedItem.maxlength"
                          :min="1"
                          controls-position="right"
                        />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.input.showWordLimit')
                        "
                      >
                        <el-switch v-model="selectedItem.showWordLimit" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.properties.clearable')
                        "
                      >
                        <el-switch v-model="selectedItem.clearable" />
                      </el-form-item>
                    </template>

                    <!-- 选择器特有属性 -->
                    <template v-if="selectedItem.type === 'select'">
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.properties.clearable')
                        "
                      >
                        <el-switch v-model="selectedItem.clearable" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.properties.multiple')
                        "
                      >
                        <el-switch v-model="selectedItem.multiple" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t(
                            'formDesigner.propertyPanel.properties.collapseTags'
                          )
                        "
                        v-if="selectedItem.multiple"
                      >
                        <el-switch v-model="selectedItem.collapseTags" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t(
                            'formDesigner.propertyPanel.properties.maxCollapseTags'
                          )
                        "
                        v-if="
                          selectedItem.multiple && selectedItem.collapseTags
                        "
                      >
                        <el-input-number
                          v-model="selectedItem.maxCollapseTags"
                          :min="0"
                          controls-position="right"
                        />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t(
                            'formDesigner.propertyPanel.properties.multipleLimit'
                          )
                        "
                        v-if="selectedItem.multiple"
                      >
                        <el-input-number
                          v-model="selectedItem.multipleLimit"
                          :min="0"
                          controls-position="right"
                          :placeholder="
                            t('formDesigner.propertyPanel.placeholders.noLimit')
                          "
                        />
                      </el-form-item>
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.options.title')"
                      >
                        <div
                          v-for="(option, index) in selectedItem.options"
                          :key="index"
                          class="option-item"
                        >
                          <el-input
                            v-model="option.label"
                            :placeholder="
                              t(
                                'formDesigner.propertyPanel.options.optionLabel'
                              )
                            "
                            size="small"
                          />
                          <el-input
                            v-model="option.value"
                            :placeholder="
                              t(
                                'formDesigner.propertyPanel.options.optionValue'
                              )
                            "
                            size="small"
                          />
                          <el-button
                            type="danger"
                            size="small"
                            plain
                            @click="removeOption(index)"
                            >{{
                              t("formDesigner.propertyPanel.options.delete")
                            }}</el-button
                          >
                        </div>
                        <el-button
                          type="primary"
                          size="small"
                          @click="addOption"
                          >{{
                            t("formDesigner.propertyPanel.options.addOption")
                          }}</el-button
                        >
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.properties.filterable')
                        "
                      >
                        <el-switch v-model="selectedItem.filterable" />
                      </el-form-item>
                    </template>

                    <!-- 单选框特有属性 -->
                    <template v-if="selectedItem.type === 'radio'">
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.options.title')"
                      >
                        <div
                          v-for="(option, index) in selectedItem.options"
                          :key="index"
                          class="option-item"
                        >
                          <el-input
                            v-model="option.label"
                            :placeholder="
                              t(
                                'formDesigner.propertyPanel.options.optionLabel'
                              )
                            "
                            size="small"
                          />
                          <el-input
                            v-model="option.value"
                            :placeholder="
                              t(
                                'formDesigner.propertyPanel.options.optionValue'
                              )
                            "
                            size="small"
                          />
                          <el-button
                            type="danger"
                            size="small"
                            plain
                            @click="removeOption(index)"
                            >{{
                              t("formDesigner.propertyPanel.options.delete")
                            }}</el-button
                          >
                        </div>
                        <el-button
                          type="primary"
                          size="small"
                          @click="addOption"
                          >{{
                            t("formDesigner.propertyPanel.options.addOption")
                          }}</el-button
                        >
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.properties.showBorder')
                        "
                      >
                        <el-switch v-model="selectedItem.border" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.properties.buttonStyle')
                        "
                      >
                        <el-switch v-model="selectedItem.buttonStyle" />
                      </el-form-item>
                    </template>

                    <!-- 多选框特有属性 -->
                    <template v-if="selectedItem.type === 'checkbox'">
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.options.title')"
                      >
                        <div
                          v-for="(option, index) in selectedItem.options"
                          :key="index"
                          class="option-item"
                        >
                          <el-input
                            v-model="option.label"
                            :placeholder="
                              t(
                                'formDesigner.propertyPanel.options.optionLabel'
                              )
                            "
                            size="small"
                          />
                          <el-input
                            v-model="option.value"
                            :placeholder="
                              t(
                                'formDesigner.propertyPanel.options.optionValue'
                              )
                            "
                            size="small"
                          />
                          <el-button
                            type="danger"
                            size="small"
                            plain
                            @click="removeOption(index)"
                            >{{
                              t("formDesigner.propertyPanel.options.delete")
                            }}</el-button
                          >
                        </div>
                        <el-button
                          type="primary"
                          size="small"
                          @click="addOption"
                          >{{
                            t("formDesigner.propertyPanel.options.addOption")
                          }}</el-button
                        >
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.properties.showBorder')
                        "
                      >
                        <el-switch v-model="selectedItem.border" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.properties.buttonStyle')
                        "
                      >
                        <el-switch v-model="selectedItem.buttonStyle" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t(
                            'formDesigner.propertyPanel.properties.minSelection'
                          )
                        "
                      >
                        <el-input-number
                          v-model="selectedItem.min"
                          :min="0"
                          controls-position="right"
                        />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t(
                            'formDesigner.propertyPanel.properties.maxSelection'
                          )
                        "
                      >
                        <el-input-number
                          v-model="selectedItem.max"
                          :min="0"
                          controls-position="right"
                        />
                      </el-form-item>
                    </template>

                    <!-- 级联选择器特有属性 -->
                    <template v-if="selectedItem.type === 'cascader'">
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.properties.clearable')
                        "
                      >
                        <el-switch v-model="selectedItem.clearable" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.properties.multiple')
                        "
                      >
                        <el-switch v-model="selectedItem.multiple" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.cascader.collapseTags')
                        "
                        v-if="selectedItem.multiple"
                      >
                        <el-switch v-model="selectedItem.collapseTags" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.cascader.filterable')
                        "
                      >
                        <el-switch v-model="selectedItem.filterable" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.cascader.separator')
                        "
                      >
                        <el-input
                          v-model="selectedItem.separator"
                          :placeholder="
                            t(
                              'formDesigner.propertyPanel.cascader.separatorPlaceholder'
                            )
                          "
                        />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.cascader.showAllLevels')
                        "
                      >
                        <el-switch v-model="selectedItem.showAllLevels" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.cascader.expandTrigger')
                        "
                      >
                        <el-select
                          v-model="selectedItem.expandTrigger"
                          :placeholder="
                            t(
                              'formDesigner.propertyPanel.cascader.expandTriggerPlaceholder'
                            )
                          "
                          clearable
                        >
                          <el-option
                            :label="
                              t(
                                'formDesigner.propertyPanel.cascader.triggers.click'
                              )
                            "
                            value="click"
                          />
                          <el-option
                            :label="
                              t(
                                'formDesigner.propertyPanel.cascader.triggers.hover'
                              )
                            "
                            value="hover"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.cascader.checkStrictly')
                        "
                      >
                        <el-switch v-model="selectedItem.checkStrictly" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.cascader.dataConfig')
                        "
                      >
                        <el-button
                          type="primary"
                          size="small"
                          @click="openCascaderDataEditor('cascader')"
                          >{{
                            t("formDesigner.propertyPanel.cascader.configData")
                          }}</el-button
                        >
                        <!-- <div
                          v-if="
                            selectedItem.options &&
                            selectedItem.options.length > 0
                          "
                          class="data-preview"
                        >
                          <span class="preview-text">{{
                            t(
                              "formDesigner.propertyPanel.cascader.configured",
                              { count: selectedItem.options.length }
                            )
                          }}</span>
                        </div> -->
                        <div
                          v-if="
                            selectedItem.options &&
                            selectedItem.options.length > 0
                          "
                          class="data-preview"
                          style="
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                          "
                        >
                          <span class="preview-text">
                            {{
                              t(
                                "formDesigner.propertyPanel.options.configuredDataItems",
                                { count: selectedItem.options.length }
                              )
                            }}
                          </span>
                          <el-icon
                            @click="clearCascaderData"
                            style="
                              cursor: pointer;
                              color: #f56c6c;
                              margin-left: 8px;
                              font-size: 14px;
                            "
                            :title="
                              t('formDesigner.propertyPanel.options.clear')
                            "
                          >
                            <Delete />
                          </el-icon>
                        </div>
                      </el-form-item>
                    </template>

                    <!-- 数字输入框特有属性 -->
                    <template v-if="selectedItem.type === 'number'">
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.number.min')"
                      >
                        <el-input-number
                          v-model="selectedItem.min"
                          :max="selectedItem.max || 100"
                          controls-position="right"
                          @change="handleMinValueChange"
                        />
                      </el-form-item>
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.number.max')"
                      >
                        <el-input-number
                          v-model="selectedItem.max"
                          :min="selectedItem.min || 0"
                          controls-position="right"
                          @change="handleMaxValueChange"
                        />
                      </el-form-item>
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.number.step')"
                      >
                        <el-input-number
                          v-model="selectedItem.step"
                          :min="0.01"
                          :step="0.01"
                          controls-position="right"
                        />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.number.precision')
                        "
                      >
                        <el-input-number
                          v-model="selectedItem.precision"
                          :min="0"
                          controls-position="right"
                        />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.number.stepStrictly')
                        "
                      >
                        <el-switch
                          v-model="selectedItem.stepStrictly"
                          @change="emit('update-history')"
                        />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t(
                            'formDesigner.propertyPanel.number.controlsPosition'
                          )
                        "
                      >
                        <el-select
                          v-model="selectedItem.controlsPosition"
                          :placeholder="
                            t(
                              'formDesigner.propertyPanel.number.controlsPositionPlaceholder'
                            )
                          "
                          @change="emit('update-history')"
                        >
                          <el-option
                            :label="
                              t(
                                'formDesigner.propertyPanel.number.positions.right'
                              )
                            "
                            value="right"
                          />
                          <el-option
                            :label="
                              t(
                                'formDesigner.propertyPanel.number.positions.both'
                              )
                            "
                            value=""
                          />
                        </el-select>
                      </el-form-item>
                    </template>

                    <!-- 文本域特有属性 -->
                    <template v-if="selectedItem.type === 'textarea'">
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.textarea.rows')"
                      >
                        <el-input-number
                          v-model="selectedItem.rows"
                          :min="1"
                          controls-position="right"
                        />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.textarea.maxLength')
                        "
                      >
                        <el-input-number
                          v-model="selectedItem.maxlength"
                          :min="1"
                          controls-position="right"
                        />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.textarea.showWordLimit')
                        "
                      >
                        <el-switch v-model="selectedItem.showWordLimit" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.textarea.autosize')
                        "
                      >
                        <div class="autosize-config">
                          <el-switch
                            v-model="autosizeEnabled"
                            @change="handleAutosizeChange"
                          />
                          <div
                            v-if="
                              autosizeEnabled &&
                              typeof selectedItem.autosize === 'object'
                            "
                            class="autosize-options"
                          >
                            <div class="autosize-row">
                              <label
                                >{{
                                  t(
                                    "formDesigner.propertyPanel.textarea.minRows"
                                  )
                                }}:</label
                              >
                              <el-input-number
                                v-model="selectedItem.autosize.minRows"
                                :min="1"
                                :max="20"
                                size="small"
                                controls-position="right"
                              />
                            </div>
                            <div class="autosize-row">
                              <label
                                >{{
                                  t(
                                    "formDesigner.propertyPanel.textarea.maxRows"
                                  )
                                }}:</label
                              >
                              <el-input-number
                                v-model="selectedItem.autosize.maxRows"
                                :min="1"
                                :max="50"
                                size="small"
                                controls-position="right"
                              />
                            </div>
                            <el-button
                              size="small"
                              type="primary"
                              plain
                              @click="toggleAutosizeMode"
                            >
                              {{
                                t(
                                  "formDesigner.propertyPanel.textarea.switchToSimple"
                                )
                              }}
                            </el-button>
                          </div>
                          <div
                            v-else-if="autosizeEnabled"
                            class="autosize-simple"
                          >
                            <el-button
                              size="small"
                              type="primary"
                              plain
                              @click="toggleAutosizeMode"
                            >
                              {{
                                t(
                                  "formDesigner.propertyPanel.textarea.switchToAdvanced"
                                )
                              }}
                            </el-button>
                          </div>
                        </div>
                      </el-form-item>
                    </template>

                    <!-- 日期选择器特有属性 -->
                    <template v-if="selectedItem.type === 'date'">
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.date.clearable')"
                      >
                        <el-switch v-model="selectedItem.clearable" />
                      </el-form-item>
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.date.multiple')"
                      >
                        <el-switch
                          v-model="selectedItem.multiple"
                          @change="changeDateMultiple(selectedItem)"
                        />
                      </el-form-item>
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.date.rangeable')"
                      >
                        <el-switch
                          v-model="selectedItem.rangeable"
                          @change="changeDateRangeable(selectedItem)"
                        />
                      </el-form-item>
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.date.dateType')"
                      >
                        <el-select
                          v-model="selectedItem.dateType"
                          @change="changeDateType(selectedItem)"
                        >
                          <template
                            v-if="
                              selectedItem.multiple && !selectedItem.rangeable
                            "
                          >
                            <el-option
                              :label="
                                t('formDesigner.propertyPanel.date.dates')
                              "
                              value="dates"
                            />
                            <el-option
                              :label="
                                t('formDesigner.propertyPanel.date.months')
                              "
                              value="months"
                            />
                            <el-option
                              :label="
                                t('formDesigner.propertyPanel.date.years')
                              "
                              value="years"
                            />
                          </template>
                          <template
                            v-else-if="
                              !selectedItem.multiple && !selectedItem.rangeable
                            "
                          >
                            <el-option
                              :label="t('formDesigner.propertyPanel.date.date')"
                              value="date"
                            />
                            <el-option
                              :label="
                                t('formDesigner.propertyPanel.date.datetime')
                              "
                              value="datetime"
                            />
                            <el-option
                              :label="t('formDesigner.propertyPanel.date.year')"
                              value="year"
                            />
                            <el-option
                              :label="
                                t('formDesigner.propertyPanel.date.month')
                              "
                              value="month"
                            />
                            <el-option
                              :label="t('formDesigner.propertyPanel.date.week')"
                              value="week"
                            />
                          </template>
                          <template v-if="selectedItem.rangeable">
                            <el-option
                              :label="
                                t('formDesigner.propertyPanel.date.daterange')
                              "
                              value="daterange"
                            />
                            <el-option
                              :label="
                                t(
                                  'formDesigner.propertyPanel.date.datetimerange'
                                )
                              "
                              value="datetimerange"
                            />
                            <el-option
                              :label="
                                t('formDesigner.propertyPanel.date.yearrange')
                              "
                              value="yearrange"
                            />
                            <el-option
                              :label="
                                t('formDesigner.propertyPanel.date.monthrange')
                              "
                              value="monthrange"
                            />
                          </template>
                        </el-select>
                      </el-form-item>
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.date.format')"
                      >
                        <el-select v-model="selectedItem.format" clearable>
                          <!-- 日期格式选项 -->
                          <template
                            v-if="
                              selectedItem.dateType === 'date' ||
                              selectedItem.dateType === 'dates' ||
                              selectedItem.dateType === 'daterange'
                            "
                          >
                            <el-option label="YYYY-MM-DD" value="YYYY-MM-DD" />
                            <el-option label="YYYY/MM/DD" value="YYYY/MM/DD" />
                            <el-option label="MM-DD-YYYY" value="MM-DD-YYYY" />
                            <el-option label="DD/MM/YYYY" value="DD/MM/YYYY" />
                          </template>
                          <!-- 日期时间格式选项 -->
                          <template
                            v-else-if="
                              selectedItem.dateType === 'datetime' ||
                              selectedItem.dateType === 'datetimerange'
                            "
                          >
                            <el-option
                              label="YYYY-MM-DD HH:mm:ss"
                              value="YYYY-MM-DD HH:mm:ss"
                            />
                            <el-option
                              label="YYYY/MM/DD HH:mm:ss"
                              value="YYYY/MM/DD HH:mm:ss"
                            />
                            <el-option
                              label="YYYY-MM-DD HH:mm"
                              value="YYYY-MM-DD HH:mm"
                            />
                            <el-option
                              label="MM-DD-YYYY HH:mm:ss"
                              value="MM-DD-YYYY HH:mm:ss"
                            />
                            <el-option
                              label="DD/MM/YYYY HH:mm:ss"
                              value="DD/MM/YYYY HH:mm:ss"
                            />
                          </template>
                          <!-- 年格式选项 -->
                          <template
                            v-else-if="
                              selectedItem.dateType === 'year' ||
                              selectedItem.dateType === 'years' ||
                              selectedItem.dateType === 'yearrange'
                            "
                          >
                            <el-option label="YYYY" value="YYYY" />
                          </template>
                          <!-- 月格式选项 -->
                          <template
                            v-else-if="
                              selectedItem.dateType === 'month' ||
                              selectedItem.dateType === 'months' ||
                              selectedItem.dateType === 'monthrange'
                            "
                          >
                            <el-option label="YYYY-MM" value="YYYY-MM" />
                            <el-option label="YYYY/MM" value="YYYY/MM" />
                            <el-option label="MM/YYYY" value="MM/YYYY" />
                          </template>
                          <!-- 周格式选项 -->
                          <template
                            v-else-if="selectedItem.dateType === 'week'"
                          >
                            <el-option label="[Week] ww" value="[Week] ww" />
                          </template>

                          <!-- 默认日期格式 -->
                          <template v-else>
                            <el-option label="YYYY-MM-DD" value="YYYY-MM-DD" />
                            <el-option label="YYYY/MM/DD" value="YYYY/MM/DD" />
                            <el-option label="MM-DD-YYYY" value="MM-DD-YYYY" />
                          </template>
                        </el-select>
                      </el-form-item>
                    </template>

                    <!-- 时间选择器特有属性 -->
                    <template v-if="selectedItem.type === 'time'">
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.date.format')"
                      >
                        <el-select v-model="selectedItem.format" clearable>
                          <el-option label="HH:mm:ss" value="HH:mm:ss" />
                          <el-option label="HH:mm" value="HH:mm" />
                          <el-option
                            label="HH:mm:ss.SSS"
                            value="HH:mm:ss.SSS"
                          />
                        </el-select>
                      </el-form-item>
                    </template>

                    <!-- 树形控件特有属性 -->
                    <template v-if="selectedItem.type === 'tree'">
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.tree.showCheckbox')
                        "
                      >
                        <el-switch v-model="selectedItem.showCheckbox" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.tree.checkStrictly')
                        "
                      >
                        <el-switch v-model="selectedItem.checkStrictly" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.tree.defaultExpandAll')
                        "
                      >
                        <el-switch v-model="selectedItem.defaultExpandAll" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.tree.expandOnClickNode')
                        "
                      >
                        <el-switch v-model="selectedItem.expandOnClickNode" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.tree.checkOnClickNode')
                        "
                      >
                        <el-switch v-model="selectedItem.checkOnClickNode" />
                      </el-form-item>
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.tree.accordion')"
                      >
                        <el-switch v-model="selectedItem.accordion" />
                      </el-form-item>
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.tree.indent')"
                      >
                        <el-input-number
                          v-model="selectedItem.indent"
                          :min="0"
                          :max="50"
                          controls-position="right"
                        />
                      </el-form-item>
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.tree.nodeKey')"
                      >
                        <template #label>
                          <span style="display: flex; align-items: center">
                            <el-popover
                              placement="top"
                              width="200"
                              trigger="hover"
                              :content="
                                t(
                                  'formDesigner.propertyPanel.treeselect.nodeKeyTooltip'
                                )
                              "
                            >
                              <template #reference>
                                <el-icon
                                  style="
                                    color: #909399;
                                    cursor: help;
                                    margin-right: 4px;
                                  "
                                >
                                  <QuestionFilled />
                                </el-icon>
                              </template>
                            </el-popover>
                            <span>{{
                              t("formDesigner.propertyPanel.tree.nodeKey")
                            }}</span>
                          </span>
                        </template>
                        <el-input
                          v-model="selectedItem.nodeKey"
                          :placeholder="
                            t('formDesigner.propertyPanel.tree.defaultId')
                          "
                        />
                      </el-form-item>
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.tree.draggable')"
                      >
                        <el-switch v-model="selectedItem.draggable" />
                      </el-form-item>
                      <!-- <el-form-item label="懒加载">
                        <el-switch v-model="selectedItem.lazy" />
                      </el-form-item> -->
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.tree.dataConfig')"
                      >
                        <el-button
                          @click="openTreeDataEditor('tree')"
                          type="primary"
                          size="small"
                          >{{
                            t("formDesigner.propertyPanel.tree.configData")
                          }}</el-button
                        >
                        <div
                          v-if="
                            selectedItem.data && selectedItem.data.length > 0
                          "
                          class="data-preview"
                          style="
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                          "
                        >
                          <span class="preview-text">
                            {{
                              t(
                                "formDesigner.propertyPanel.options.configuredDataItems",
                                { count: selectedItem.data.length }
                              )
                            }}
                          </span>
                          <el-icon
                            @click="clearTreeData"
                            style="
                              cursor: pointer;
                              color: #f56c6c;
                              margin-left: 8px;
                              font-size: 14px;
                            "
                            :title="
                              t('formDesigner.propertyPanel.options.clear')
                            "
                          >
                            <Delete />
                          </el-icon>
                        </div>
                      </el-form-item>
                    </template>

                    <!-- 树形选择器特有属性 -->
                    <template v-if="selectedItem.type === 'treeselect'">
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.treeselect.clearable')
                        "
                      >
                        <el-switch v-model="selectedItem.clearable" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.treeselect.multiple')
                        "
                      >
                        <el-switch v-model="selectedItem.multiple" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t(
                            'formDesigner.propertyPanel.treeselect.showCheckbox'
                          )
                        "
                      >
                        <el-switch v-model="selectedItem.showCheckbox" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t(
                            'formDesigner.propertyPanel.treeselect.checkStrictly'
                          )
                        "
                      >
                        <el-switch v-model="selectedItem.checkStrictly" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t(
                            'formDesigner.propertyPanel.treeselect.defaultExpandAll'
                          )
                        "
                      >
                        <el-switch v-model="selectedItem.defaultExpandAll" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t(
                            'formDesigner.propertyPanel.treeselect.expandOnClickNode'
                          )
                        "
                      >
                        <el-switch v-model="selectedItem.expandOnClickNode" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t(
                            'formDesigner.propertyPanel.treeselect.checkOnClickNode'
                          )
                        "
                      >
                        <el-switch v-model="selectedItem.checkOnClickNode" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.treeselect.filterable')
                        "
                      >
                        <el-switch v-model="selectedItem.filterable" />
                      </el-form-item>
                      <!-- <el-form-item label="折叠标签">
                        <el-switch v-model="selectedItem.collapseTags" />
                      </el-form-item>
                      <el-form-item label="折叠标签提示">
                        <el-switch v-model="selectedItem.collapseTagsTooltip" />
                      </el-form-item>
                      <el-form-item label="最大折叠标签数">
                        <el-input-number
                          v-model="selectedItem.maxCollapseTags"
                          :min="1"
                          controls-position="right"
                        />
                      </el-form-item> -->
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.treeselect.accordion')
                        "
                      >
                        <el-switch v-model="selectedItem.accordion" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.treeselect.indent')
                        "
                      >
                        <el-input-number
                          v-model="selectedItem.indent"
                          :min="0"
                          :max="50"
                          controls-position="right"
                        />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.treeselect.nodeKey')
                        "
                      >
                        <template #label>
                          <span style="display: flex; align-items: center">
                            <el-popover
                              placement="top"
                              width="200"
                              trigger="hover"
                              :content="
                                t(
                                  'formDesigner.propertyPanel.treeselect.nodeKeyTooltip'
                                )
                              "
                            >
                              <template #reference>
                                <el-icon
                                  style="
                                    color: #909399;
                                    cursor: help;
                                    margin-right: 4px;
                                  "
                                >
                                  <QuestionFilled />
                                </el-icon>
                              </template>
                            </el-popover>
                            <span>{{
                              t("formDesigner.propertyPanel.treeselect.nodeKey")
                            }}</span>
                          </span>
                        </template>
                        <el-input
                          v-model="selectedItem.nodeKey"
                          :placeholder="
                            t(
                              'formDesigner.propertyPanel.treeselect.nodeKeyPlaceholder'
                            )
                          "
                        />
                      </el-form-item>
                      <!-- <el-form-item label="远程搜索">
                        <el-switch v-model="selectedItem.remote" />
                      </el-form-item>
                      <el-form-item label="懒加载">
                        <el-switch v-model="selectedItem.lazy" />
                      </el-form-item> -->
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.treeselect.dataConfig')
                        "
                      >
                        <el-button
                          @click="openTreeDataEditor('treeselect')"
                          type="primary"
                          size="small"
                          >{{
                            t(
                              "formDesigner.propertyPanel.treeselect.configData"
                            )
                          }}</el-button
                        >
                        <div
                          v-if="
                            selectedItem.data && selectedItem.data.length > 0
                          "
                          class="data-preview"
                          style="
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                          "
                        >
                          <span class="preview-text">
                            {{
                              t(
                                "formDesigner.propertyPanel.options.configuredDataItems",
                                { count: selectedItem.data.length }
                              )
                            }}
                          </span>
                          <el-icon
                            @click="clearTreeData"
                            style="
                              cursor: pointer;
                              color: #f56c6c;
                              margin-left: 8px;
                              font-size: 14px;
                            "
                            :title="
                              t('formDesigner.propertyPanel.options.clear')
                            "
                          >
                            <Delete />
                          </el-icon>
                        </div>
                      </el-form-item>
                    </template>

                    <!-- 开关特有属性 -->
                    <template v-if="selectedItem.type === 'switch'">
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.switch.activeText')
                        "
                      >
                        <el-input
                          v-model="selectedItem.activeText"
                          :placeholder="
                            t(
                              'formDesigner.propertyPanel.switch.activeTextPlaceholder'
                            )
                          "
                          clearable
                        />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.switch.inactiveText')
                        "
                      >
                        <el-input
                          v-model="selectedItem.inactiveText"
                          :placeholder="
                            t(
                              'formDesigner.propertyPanel.switch.inactiveTextPlaceholder'
                            )
                          "
                          clearable
                        />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.switch.activeValue')
                        "
                      >
                        <div
                          style="display: flex; gap: 8px; align-items: center"
                        >
                          <el-select
                            v-model="selectedItem.activeValueType"
                            :placeholder="
                              t(
                                'formDesigner.propertyPanel.button.typePlaceholder'
                              )
                            "
                            style="width: 80px"
                            @change="handleActiveValueTypeChange"
                          >
                            <el-option
                              :label="
                                t('formDesigner.propertyPanel.switch.boolean')
                              "
                              value="boolean"
                            />
                            <el-option
                              :label="
                                t('formDesigner.propertyPanel.switch.string')
                              "
                              value="string"
                            />
                            <el-option
                              :label="
                                t(
                                  'formDesigner.propertyPanel.input.types.number'
                                )
                              "
                              value="number"
                            />
                          </el-select>
                          <el-switch
                            v-if="selectedItem.activeValueType === 'boolean'"
                            v-model="selectedItem.activeValue"
                            disabled
                            style="flex: 1"
                          />
                          <el-input
                            v-else-if="
                              selectedItem.activeValueType === 'number'
                            "
                            v-model="selectedItem.activeValue"
                            style="flex: 1"
                            clearable
                            type="number"
                          />
                          <el-input
                            v-else
                            v-model="selectedItem.activeValue"
                            style="flex: 1"
                            clearable
                          />
                        </div>
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.switch.inactiveValue')
                        "
                      >
                        <div
                          style="display: flex; gap: 8px; align-items: center"
                        >
                          <el-select
                            v-model="selectedItem.inactiveValueType"
                            :placeholder="
                              t(
                                'formDesigner.propertyPanel.button.typePlaceholder'
                              )
                            "
                            style="width: 80px"
                            @change="handleInactiveValueTypeChange"
                          >
                            <el-option
                              :label="
                                t('formDesigner.propertyPanel.switch.boolean')
                              "
                              value="boolean"
                            />
                            <el-option
                              :label="
                                t('formDesigner.propertyPanel.switch.string')
                              "
                              value="string"
                            />
                            <el-option
                              :label="
                                t('formDesigner.propertyPanel.switch.number')
                              "
                              value="number"
                            />
                          </el-select>
                          <el-switch
                            v-if="selectedItem.inactiveValueType === 'boolean'"
                            disabled
                            v-model="selectedItem.inactiveValue"
                            style="flex: 1"
                          />
                          <el-input
                            v-else-if="
                              selectedItem.inactiveValueType === 'number'
                            "
                            v-model="selectedItem.inactiveValue"
                            style="flex: 1"
                            clearable
                            type="number"
                          />
                          <el-input
                            v-else
                            v-model="selectedItem.inactiveValue"
                            style="flex: 1"
                            clearable
                          />
                        </div>
                      </el-form-item>
                    </template>

                    <!-- 滑块特有属性 -->
                    <template v-if="selectedItem.type === 'slider'">
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.slider.minValue')"
                      >
                        <el-input-number
                          v-model="selectedItem.min"
                          controls-position="right"
                          :max="selectedItem.max || 100"
                          @change="handleMinValueChange"
                        />
                      </el-form-item>
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.slider.maxValue')"
                      >
                        <el-input-number
                          v-model="selectedItem.max"
                          controls-position="right"
                          :min="selectedItem.min || 0"
                          @change="handleMaxValueChange"
                        />
                      </el-form-item>
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.slider.step')"
                      >
                        <el-input-number
                          v-model="selectedItem.step"
                          :min="0.01"
                          :step="0.01"
                          controls-position="right"
                        />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.slider.showInput')
                        "
                      >
                        <el-switch v-model="selectedItem.showInput" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t(
                            'formDesigner.propertyPanel.slider.showInputControls'
                          )
                        "
                        v-if="selectedItem.showInput"
                      >
                        <el-switch v-model="selectedItem.showInputControls" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.slider.showStops')
                        "
                      >
                        <el-switch v-model="selectedItem.showStops" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.slider.showTooltip')
                        "
                      >
                        <el-switch v-model="selectedItem.showTooltip" />
                      </el-form-item>
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.slider.range')"
                        v-if="!selectedItem.showInput"
                      >
                        <el-switch v-model="selectedItem.range" />
                      </el-form-item>
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.slider.vertical')"
                      >
                        <el-switch v-model="selectedItem.vertical" />
                      </el-form-item>
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.slider.height')"
                        v-if="selectedItem.vertical"
                      >
                        <el-input
                          v-model="selectedItem.height"
                          :placeholder="
                            t(
                              'formDesigner.propertyPanel.basic.widthPlaceholder'
                            )
                          "
                        />
                      </el-form-item>
                    </template>

                    <!-- 描述列表特有属性 -->
                    <template v-if="selectedItem.type === 'descriptions'">
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.basic.title')"
                      >
                        <el-input
                          v-model="selectedItem.title"
                          :placeholder="
                            t(
                              'formDesigner.propertyPanel.descriptions.titlePlaceholder'
                            )
                          "
                        />
                      </el-form-item>
                      <el-form-item
                        :label="t('formDesigner.componentPanel.column')"
                      >
                        <el-input-number
                          v-model="selectedItem.column"
                          :min="1"
                          :max="6"
                          controls-position="right"
                        />
                      </el-form-item>
                      <el-form-item
                        :label="t('formDesigner.propertyPanel.basic.size')"
                      >
                        <el-select
                          v-model="selectedItem.size"
                          :placeholder="
                            t(
                              'formDesigner.propertyPanel.descriptions.sizePlaceholder'
                            )
                          "
                        >
                          <el-option
                            :label="t('formDesigner.propertyPanel.basic.large')"
                            value="large"
                          />
                          <el-option
                            :label="
                              t('formDesigner.propertyPanel.basic.default')
                            "
                            value="default"
                          />
                          <el-option
                            :label="t('formDesigner.propertyPanel.basic.small')"
                            value="small"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.properties.showBorder')
                        "
                      >
                        <el-switch v-model="selectedItem.border" />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.descriptions.direction')
                        "
                      >
                        <el-select
                          v-model="selectedItem.direction"
                          :placeholder="
                            t(
                              'formDesigner.propertyPanel.descriptions.directionPlaceholder'
                            )
                          "
                        >
                          <el-option
                            :label="
                              t(
                                'formDesigner.propertyPanel.descriptions.horizontal'
                              )
                            "
                            value="horizontal"
                          />
                          <el-option
                            :label="
                              t(
                                'formDesigner.propertyPanel.descriptions.vertical'
                              )
                            "
                            value="vertical"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.descriptions.extra')
                        "
                      >
                        <el-input
                          v-model="selectedItem.extra"
                          :placeholder="
                            t(
                              'formDesigner.propertyPanel.descriptions.extraPlaceholder'
                            )
                          "
                        />
                      </el-form-item>
                      <el-form-item
                        :label="
                          t(
                            'formDesigner.propertyPanel.descriptions.itemsConfig'
                          )
                        "
                      >
                        <el-button
                          type="primary"
                          size="small"
                          @click="openDescriptionsItemEditor('descriptions')"
                          >{{
                            t(
                              "formDesigner.propertyPanel.descriptions.configItems"
                            )
                          }}</el-button
                        >
                        <div
                          v-if="
                            selectedItem.items && selectedItem.items.length > 0
                          "
                          class="data-preview"
                          style="
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                          "
                        >
                          <span class="preview-text">
                            {{
                              t(
                                "formDesigner.propertyPanel.options.configuredDataItems",
                                { count: selectedItem.items.length }
                              )
                            }}
                          </span>
                          <el-icon
                            @click="clearDescriptionsData"
                            style="
                              cursor: pointer;
                              color: #f56c6c;
                              margin-left: 8px;
                              font-size: 14px;
                            "
                            :title="
                              t('formDesigner.propertyPanel.options.clear')
                            "
                          >
                            <Delete />
                          </el-icon>
                        </div>
                      </el-form-item>
                    </template>

                    <template v-if="selectedItem.type === 'grid'">
                      <el-form label-width="90px" size="small">
                        <!-- 栅格间距 -->
                        <el-form-item
                          :label="t('formDesigner.designCanvas.grid.gridSpace')"
                        >
                          <el-slider
                            v-model="selectedItem.gutter"
                            :min="0"
                            :max="48"
                            :step="4"
                            style="padding-right: 15px"
                          />
                        </el-form-item>
                      </el-form>
                    </template>
                  </el-form>
                </el-collapse-item>

                <!-- 验证配置 -->
                <el-collapse-item
                  :title="t('formDesigner.propertyPanel.validation.title')"
                  name="validation"
                  v-if="
                    selectedItem.type != 'tree' &&
                    selectedItem.type != 'slider' &&
                    selectedItem.type != 'grid' &&
                    selectedItem.type !== 'descriptions'
                  "
                >
                  <el-form label-width="90px" size="small">
                    <el-form-item
                      :label="
                        t('formDesigner.propertyPanel.validation.required')
                      "
                    >
                      <el-switch v-model="selectedItem.required" />
                    </el-form-item>

                    <!-- 必填时显示的配置 -->
                    <template v-if="selectedItem.required">
                      <el-form-item
                        :label="
                          t(
                            'formDesigner.propertyPanel.validation.requiredMessage'
                          )
                        "
                      >
                        <el-input
                          v-model="selectedItem.requiredMessage"
                          :placeholder="
                            t(
                              'formDesigner.propertyPanel.validation.messagePlaceholder'
                            )
                          "
                          size="small"
                        />
                      </el-form-item>

                      <el-form-item
                        :label="
                          t('formDesigner.propertyPanel.validation.trigger')
                        "
                      >
                        <el-radio-group
                          v-model="selectedItem.trigger"
                          size="small"
                        >
                          <el-radio value="blur">{{
                            t(
                              "formDesigner.propertyPanel.validation.triggerOptions.blur"
                            )
                          }}</el-radio>
                          <el-radio value="change">{{
                            t(
                              "formDesigner.propertyPanel.validation.triggerOptions.change"
                            )
                          }}</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </template>
                    <el-form-item
                      :label="
                        t(
                          'formDesigner.propertyPanel.validation.validationRules'
                        )
                      "
                      v-if="
                        (selectedItem.type != 'select' &&
                          selectedItem.type != 'treeselect' &&
                          selectedItem.type != 'cascader') ||
                        (selectedItem.type === 'select' &&
                          selectedItem.multiple) ||
                        (selectedItem.type === 'treeselect' &&
                          selectedItem.multiple) ||
                        (selectedItem.type === 'cascader' &&
                          selectedItem.multiple)
                      "
                    >
                      <div
                        v-for="(rule, index) in selectedItem.validationRules"
                        :key="index"
                        class="validation-rule-item"
                      >
                        <div class="rule-row">
                          <el-select
                            v-model="rule.type"
                            :placeholder="
                              t(
                                'formDesigner.propertyPanel.validation.typeSelectPlaceholder'
                              )
                            "
                            size="small"
                            style="width: 100%; margin-bottom: 8px"
                          >
                            <!-- 数字输入组件的验证规则 -->
                            <template v-if="selectedItem.type === 'number'">
                              <el-option
                                :label="
                                  t(
                                    'formDesigner.propertyPanel.validation.ruleTypes.min'
                                  )
                                "
                                value="min"
                              />
                              <el-option
                                :label="
                                  t(
                                    'formDesigner.propertyPanel.validation.ruleTypes.max'
                                  )
                                "
                                value="max"
                              />
                              <el-option
                                :label="
                                  t(
                                    'formDesigner.propertyPanel.validation.ruleTypes.integer'
                                  )
                                "
                                value="integer"
                              />
                              <el-option
                                :label="
                                  t(
                                    'formDesigner.propertyPanel.validation.ruleTypes.precision'
                                  )
                                "
                                value="precision"
                              />
                              <el-option
                                :label="
                                  t(
                                    'formDesigner.propertyPanel.validation.ruleTypes.custom'
                                  )
                                "
                                value="custom"
                              />
                            </template>
                            <!-- 选择器组件的验证规则 -->
                            <template
                              v-else-if="
                                selectedItem.type === 'select' ||
                                selectedItem.type === 'treeselect'
                              "
                            >
                              <template v-if="selectedItem.multiple">
                                <el-option
                                  :label="
                                    t(
                                      'formDesigner.propertyPanel.validation.ruleTypes.minItems'
                                    )
                                  "
                                  value="minItems"
                                />
                                <el-option
                                  :label="
                                    t(
                                      'formDesigner.propertyPanel.validation.ruleTypes.maxItems'
                                    )
                                  "
                                  value="maxItems"
                                />
                              </template>
                            </template>
                            <!-- 级联选择器的验证规则 -->
                            <template
                              v-else-if="selectedItem.type === 'cascader'"
                            >
                              <template v-if="selectedItem.multiple">
                                <el-option
                                  :label="
                                    t(
                                      'formDesigner.propertyPanel.validation.ruleTypes.minItems'
                                    )
                                  "
                                  value="minItems"
                                />
                                <el-option
                                  :label="
                                    t(
                                      'formDesigner.propertyPanel.validation.ruleTypes.maxItems'
                                    )
                                  "
                                  value="maxItems"
                                />
                              </template>
                            </template>

                            <!-- 单选框组件的验证规则 -->
                            <template
                              v-else-if="
                                selectedItem.type === 'radio' ||
                                selectedItem.type === 'checkbox' ||
                                selectedItem.type === 'date' ||
                                selectedItem.type === 'switch'
                              "
                            >
                              <el-option
                                :label="
                                  t(
                                    'formDesigner.propertyPanel.validation.ruleTypes.custom'
                                  )
                                "
                                value="custom"
                              />
                            </template>
                            <!-- 其他组件的验证规则 -->
                            <template v-else>
                              <el-option
                                :label="
                                  t(
                                    'formDesigner.propertyPanel.validation.ruleTypes.minLength'
                                  )
                                "
                                value="minLength"
                              />
                              <el-option
                                :label="
                                  t(
                                    'formDesigner.propertyPanel.validation.ruleTypes.maxLength'
                                  )
                                "
                                value="maxLength"
                              />
                              <el-option
                                :label="
                                  t(
                                    'formDesigner.propertyPanel.validation.ruleTypes.pattern'
                                  )
                                "
                                value="pattern"
                              />
                              <el-option
                                :label="
                                  t(
                                    'formDesigner.propertyPanel.validation.ruleTypes.custom'
                                  )
                                "
                                value="custom"
                              />
                            </template>
                          </el-select>
                        </div>

                        <div class="rule-row" v-if="rule.type !== 'integer'">
                          <el-input
                            v-model="rule.value"
                            :placeholder="
                              t(
                                'formDesigner.propertyPanel.validation.ruleValue'
                              )
                            "
                            size="small"
                            :type="
                              getValidationRuleValueType(selectedItem, rule)
                            "
                            style="width: 100%; margin-bottom: 8px"
                          />
                        </div>

                        <div class="rule-row">
                          <el-input
                            v-model="rule.message"
                            :placeholder="
                              t(
                                'formDesigner.propertyPanel.validation.errorMessagePlaceholder'
                              )
                            "
                            size="small"
                            style="width: 100%; margin-bottom: 8px"
                          />
                        </div>

                        <div class="rule-row">
                          <el-select
                            v-model="rule.trigger"
                            :placeholder="
                              t(
                                'formDesigner.propertyPanel.validation.triggerPlaceholder'
                              )
                            "
                            size="small"
                            style="width: 100%; margin-bottom: 8px"
                          >
                            <el-option
                              :label="
                                t(
                                  'formDesigner.propertyPanel.validation.triggerOptions.blur'
                                )
                              "
                              value="blur"
                            />
                            <el-option
                              :label="
                                t(
                                  'formDesigner.propertyPanel.validation.triggerOptions.change'
                                )
                              "
                              value="change"
                            />
                          </el-select>
                        </div>

                        <div class="rule-row">
                          <el-button
                            type="danger"
                            size="small"
                            plain
                            @click="removeValidationRule(index)"
                            style="width: 100%"
                          >
                            {{
                              t(
                                "formDesigner.propertyPanel.validation.deleteRule"
                              )
                            }}
                          </el-button>
                        </div>
                      </div>

                      <el-button
                        type="primary"
                        size="small"
                        @click="addValidationRule"
                      >
                        {{ t("formDesigner.propertyPanel.validation.addRule") }}
                      </el-button>
                    </el-form-item>
                  </el-form>
                </el-collapse-item>

                <!-- 事件配置 -->
                <el-collapse-item
                  :title="t('formDesigner.propertyPanel.events.title')"
                  name="events"
                  v-if="
                    selectedItem.type != 'grid' &&
                    selectedItem.type !== 'descriptions'
                  "
                >
                  <div style="padding: 10px 0">
                    <el-button
                      type="primary"
                      size="small"
                      @click="openEventDialog"
                      style="width: 100%"
                    >
                      {{ t("formDesigner.propertyPanel.events.setEvents") }}
                      {{
                        getConfiguredEventsCount() > 0
                          ? `(${getConfiguredEventsCount()})`
                          : ""
                      }}
                    </el-button>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>

            <!-- 栅格列配置 -->
            <div
              v-if="
                isGridColumnSelected &&
                selectedItem.columns &&
                selectedItem.columns[selectedGridColumnIndex]
              "
            >
              <el-collapse v-model="activeCollapse" accordion>
                <el-collapse-item
                  :title="t('formDesigner.propertyPanel.properties.title')"
                  name="properties"
                >
                  <el-form label-width="90px" size="small">
                    <!-- 当前列配置 -->
                    <el-form-item
                      :label="t('formDesigner.designCanvas.grid.colWidth')"
                    >
                      <el-slider
                        v-model="
                          selectedItem.columns[selectedGridColumnIndex].span
                        "
                        :min="1"
                        :max="24"
                        @change="
                          updateColumnSpan(selectedGridColumnIndex, $event)
                        "
                        style="padding-right: 15px"
                      />
                    </el-form-item>
                  </el-form> </el-collapse-item
              ></el-collapse>
            </div>
          </div>
          <div v-else class="no-selection">
            <el-empty
              :description="t('formDesigner.designCanvas.empty.emptyComponent')"
            />
          </div>
        </el-tab-pane>

        <el-tab-pane
          :label="t('formDesigner.propertyPanel.tabs.form')"
          name="form"
        >
          <el-form label-width="100px" size="small">
            <el-form-item
              :label="t('formDesigner.propertyPanel.formConfig.labelWidth')"
            >
              <div class="label-width-input">
                <el-input
                  v-model="formLabelWidthNumber"
                  :disabled="currentFormLabelWidthUnit === 'auto'"
                  :placeholder="getPlaceholderByUnit(currentFormLabelWidthUnit)"
                  class="width-number-input"
                />
                <div
                  class="unit-selector"
                  @click="switchFormUnit"
                  :title="
                    t('formDesigner.propertyPanel.formConfig.clickToSwitchUnit')
                  "
                >
                  {{ currentFormLabelWidthUnit }}
                </div>
              </div>
            </el-form-item>
            <el-form-item
              :label="t('formDesigner.propertyPanel.formConfig.labelPosition')"
            >
              <el-select v-model="formConfig.labelPosition">
                <el-option
                  :label="t('formDesigner.propertyPanel.formConfig.rightAlign')"
                  value="right"
                />
                <el-option
                  :label="t('formDesigner.propertyPanel.formConfig.leftAlign')"
                  value="left"
                />
                <el-option
                  :label="t('formDesigner.propertyPanel.formConfig.topAlign')"
                  value="top"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              :label="t('formDesigner.propertyPanel.formConfig.componentSize')"
            >
              <el-select v-model="formConfig.size">
                <el-option
                  :label="t('formDesigner.propertyPanel.formConfig.large')"
                  value="large"
                />
                <el-option
                  :label="t('formDesigner.propertyPanel.formConfig.default')"
                  value="default"
                />
                <el-option
                  :label="t('formDesigner.propertyPanel.formConfig.small')"
                  value="small"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              :label="
                t('formDesigner.propertyPanel.formConfig.showSubmitButton')
              "
            >
              <el-radio-group v-model="formConfig.showSubmitButton">
                <el-radio :value="true">{{
                  t("formDesigner.propertyPanel.formConfig.yes")
                }}</el-radio>
                <el-radio :value="false">{{
                  t("formDesigner.propertyPanel.formConfig.no")
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              :label="
                t('formDesigner.propertyPanel.formConfig.showResetButton')
              "
            >
              <el-radio-group v-model="formConfig.showResetButton">
                <el-radio :value="true">{{
                  t("formDesigner.propertyPanel.formConfig.yes")
                }}</el-radio>
                <el-radio :value="false">{{
                  t("formDesigner.propertyPanel.formConfig.no")
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              :label="t('formDesigner.propertyPanel.formConfig.formEvents')"
            >
              <el-button
                type="primary"
                size="small"
                @click="openFormEventDialog"
              >
                {{ t("formDesigner.propertyPanel.formConfig.configureEvents") }}
                {{ getFormConfiguredEventsCount() }}
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>

  <!-- 事件配置弹窗 -->
  <el-dialog
    v-model="eventDialogVisible"
    :title="
      isFormEventMode
        ? t('formDesigner.propertyPanel.events.formEventConfig')
        : t('formDesigner.propertyPanel.events.componentEventConfig')
    "
    width="800px"
    :close-on-click-modal="false"
  >
    <div class="event-dialog-content">
      <div class="event-list">
        <div class="event-list-header">
          <span>{{ t("formDesigner.propertyPanel.events.eventList") }}</span>
          <el-select
            v-model="selectedEventType"
            :placeholder="
              t('formDesigner.propertyPanel.events.selectEventPlaceholder')
            "
            @change="addEventByType"
            style="width: 150px"
            clearable
          >
            <el-option
              v-for="event in getAvailableEventTypes"
              :key="event.type"
              :label="event.label"
              :value="event.type"
            />
          </el-select>
        </div>
        <div class="event-items">
          <div
            v-for="(eventItem, index) in eventList"
            :key="index"
            class="event-item"
            :class="{ active: selectedEventIndex === index }"
            @click="selectEvent(index)"
          >
            <div class="event-label">
              <el-tooltip
                :content="getEventDescription(eventItem.type)"
                placement="top"
                effect="dark"
              >
                <el-icon class="event-help-icon">
                  <QuestionFilled />
                </el-icon>
              </el-tooltip>
              <span>{{ eventItem.label }}</span>
            </div>
            <el-button
              size="small"
              type="danger"
              link
              @click.stop="removeEvent(index)"
            >
              {{ t("formDesigner.propertyPanel.events.delete") }}
            </el-button>
          </div>
        </div>
      </div>
      <div class="event-editor">
        <div class="event-editor-header">
          <span v-if="selectedEventIndex >= 0">{{
            t("formDesigner.propertyPanel.events.editEvent", {
              event: eventList[selectedEventIndex]?.label,
            })
          }}</span>
          <span v-else>{{
            t("formDesigner.propertyPanel.events.selectEvent")
          }}</span>
        </div>
        <div class="event-editor-content" v-if="selectedEventIndex >= 0">
          <!-- 提交事件的完整模板 -->
          <div
            v-if="
              isFormEventMode &&
              eventList[selectedEventIndex]?.type === 'submit'
            "
            class="function-template-full"
          >
            <pre class="template-line">
const {{ eventList[selectedEventIndex]?.functionName }} = async () => {</pre
            >
            <pre class="template-line">  try {</pre>
            <pre class="template-line">    await formRef.value.validate()</pre>
            <pre class="template-line user-code-marker">
    // {{ t("formDesigner.propertyPanel.events.codeCommentInsertHere") }}</pre
            >
            <el-input
              v-model="currentEventCode"
              type="textarea"
              :rows="6"
              :placeholder="
                t('formDesigner.propertyPanel.events.submitCodePlaceholder')
              "
              class="code-editor inline-editor"
            />
            <pre class="template-line">
    console.log('{{
                t("formDesigner.propertyPanel.events.formData")
              }}:', formData)</pre
            >
            <pre class="template-line">
    ElMessage.success('{{
                t("formDesigner.propertyPanel.events.submitSuccess")
              }}')</pre
            >
            <pre class="template-line">  } catch (error) {</pre>
            <pre class="template-line">
    ElMessage.error('{{
                t("formDesigner.propertyPanel.events.checkFormData")
              }}')</pre
            >
            <pre class="template-line">  }</pre>
            <pre class="template-line">}</pre>
          </div>
          <!-- 重置事件的完整模板 -->
          <div
            v-else-if="
              isFormEventMode && eventList[selectedEventIndex]?.type === 'reset'
            "
            class="function-template-full"
          >
            <pre class="template-line">
const {{ eventList[selectedEventIndex]?.functionName }} = () => {</pre
            >
            <pre class="template-line">  try {</pre>
            <pre class="template-line user-code-marker">
    // {{ t("formDesigner.propertyPanel.events.codeCommentInsertHere") }}</pre
            >
            <el-input
              v-model="currentEventCode"
              type="textarea"
              :rows="6"
              :placeholder="
                t('formDesigner.propertyPanel.events.resetCodePlaceholder')
              "
              class="code-editor inline-editor"
            />
            <pre class="template-line">  } catch (error) {</pre>
            <pre class="template-line">
    console.error('{{
                t("formDesigner.propertyPanel.events.resetEventError")
              }}', error)</pre
            >
            <pre class="template-line">  }</pre>
            <pre class="template-line">  formRef.value.resetFields()</pre>
            <pre class="template-line">}</pre>
          </div>
          <!-- 表单验证事件的完整模板 -->
          <div
            v-else-if="eventList[selectedEventIndex]?.type === 'validate'"
            class="function-template-full"
          >
            <pre class="template-line">
const {{ eventList[selectedEventIndex]?.functionName }} = () => {</pre
            >
            <pre class="template-line">
  // {{ t("formDesigner.propertyPanel.events.validateWholeForm") }}</pre
            >
            <pre class="template-line">
  formRef.value.validate((valid, fields) => {</pre
            >
            <pre class="template-line">    if (valid) {</pre>
            <pre class="template-line">
      console.log('{{
                t("formDesigner.propertyPanel.events.formValidationPassed")
              }}');</pre
            >
            <pre class="template-line user-code-marker">
      // {{ t("formDesigner.propertyPanel.events.codeCommentInsertHere") }}</pre
            >
            <el-input
              v-model="currentEventCode"
              type="textarea"
              :rows="6"
              :placeholder="
                t('formDesigner.propertyPanel.events.validateCodePlaceholder')
              "
              class="code-editor inline-editor"
            />
            <pre class="template-line">    } else {</pre>
            <pre class="template-line">
      console.log('{{
                t("formDesigner.propertyPanel.events.formValidationFailed")
              }}:', fields);</pre
            >
            <pre class="template-line">
      ElMessage.error('{{
                t(
                  "formDesigner.propertyPanel.events.formValidationFailedMessage"
                )
              }}');</pre
            >
            <pre class="template-line">    }</pre>
            <pre class="template-line">  });</pre>
            <pre class="template-line">}</pre>
          </div>
          <!-- 字段验证事件的完整模板 -->
          <div
            v-else-if="eventList[selectedEventIndex]?.type === 'validateField'"
            class="function-template-full"
          >
            <pre class="template-line">
const {{ eventList[selectedEventIndex]?.functionName }} = () => {</pre
            >
            <pre class="template-line">
  // {{ t("formDesigner.propertyPanel.events.validateSpecificField") }}</pre
            >
            <pre class="template-line">
  const fieldName = 'fieldName'; // {{
                t(
                  "formDesigner.propertyPanel.events.replaceWithActualFieldName"
                )
              }}</pre
            >
            <pre class="template-line">
  formRef.value.validateField(fieldName, (errorMessage) => {</pre
            >
            <pre class="template-line">    if (errorMessage) {</pre>
            <pre class="template-line">
      console.log('{{
                t("formDesigner.propertyPanel.events.fieldValidationFailed")
              }}', errorMessage);</pre
            >
            <pre class="template-line">    } else {</pre>
            <pre class="template-line">
      console.log('{{
                t("formDesigner.propertyPanel.events.fieldValidationPassed")
              }}');</pre
            >
            <pre class="template-line">    }</pre>
            <pre class="template-line user-code-marker">
    // {{ t("formDesigner.propertyPanel.events.codeCommentInsertHere") }}</pre
            >
            <el-input
              v-model="currentEventCode"
              type="textarea"
              :rows="6"
              :placeholder="
                t(
                  'formDesigner.propertyPanel.events.fieldValidateCodePlaceholder'
                )
              "
              class="code-editor inline-editor"
            />
            <pre class="template-line">  });</pre>
            <pre class="template-line">}</pre>
          </div>
          <!-- 清除验证事件的完整模板 -->
          <div
            v-else-if="eventList[selectedEventIndex]?.type === 'clearValidate'"
            class="function-template-full"
          >
            <pre class="template-line">
const {{ eventList[selectedEventIndex]?.functionName }} = () => {</pre
            >
            <pre class="template-line">
  // {{ t("formDesigner.propertyPanel.events.clearFormValidationState") }}</pre
            >

            <pre class="template-line">  formRef.value.clearValidate();</pre>
            <pre class="template-line">
  console.log('{{
                t(
                  "formDesigner.propertyPanel.events.formValidationStateCleared"
                )
              }}');</pre
            >
            <pre class="template-line user-code-marker">
  // {{ t("formDesigner.propertyPanel.events.codeCommentInsertHere") }}</pre
            >
            <el-input
              v-model="currentEventCode"
              type="textarea"
              :rows="6"
              :placeholder="
                t(
                  'formDesigner.propertyPanel.events.clearValidateCodePlaceholder'
                )
              "
              class="code-editor inline-editor"
            />
            <pre class="template-line">}</pre>
          </div>
          <!-- 树形控件的事件 -->
          <div
            v-else-if="eventList[selectedEventIndex]?.type === 'nodeClick'"
            class="function-template-full"
          >
            <pre
              class="template-line"
            ><span >const {{ eventList[selectedEventIndex]?.functionName }} = (data, node, nodeComponent, event) => {</span></pre>
            <pre class="template-line user-code-marker">
    // {{ t("formDesigner.propertyPanel.events.codeCommentInsertHere") }}</pre
            >
            <el-input
              v-model="currentEventCode"
              type="textarea"
              :rows="6"
              :placeholder="
                t('formDesigner.propertyPanel.events.eventCodePlaceholder')
              "
              class="code-editor inline-editor"
            />
            <pre class="template-line">}</pre>
          </div>
          <div
            v-else-if="eventList[selectedEventIndex]?.type === 'checkChange'"
            class="function-template-full"
          >
            <pre
              class="template-line"
            ><span >const {{ eventList[selectedEventIndex]?.functionName }} = (data, checked, indeterminate) => {</span></pre>
            <pre class="template-line user-code-marker">
    // {{ t("formDesigner.propertyPanel.events.codeCommentInsertHere") }}</pre
            >
            <el-input
              v-model="currentEventCode"
              type="textarea"
              :rows="6"
              :placeholder="
                t('formDesigner.propertyPanel.events.eventCodePlaceholder')
              "
              class="code-editor inline-editor"
            />
            <pre class="template-line">}</pre>
          </div>
          <div
            v-else-if="eventList[selectedEventIndex]?.type === 'check'"
            class="function-template-full"
          >
            <pre
              class="template-line"
            ><span >const {{ eventList[selectedEventIndex]?.functionName }} = (data, checkedInfo) => {</span></pre>
            <pre class="template-line user-code-marker">
    // {{ t("formDesigner.propertyPanel.events.codeCommentInsertHere") }}</pre
            >
            <el-input
              v-model="currentEventCode"
              type="textarea"
              :rows="6"
              :placeholder="
                t('formDesigner.propertyPanel.events.eventCodePlaceholder')
              "
              class="code-editor inline-editor"
            />
            <pre class="template-line">}</pre>
          </div>
          <div
            v-else-if="eventList[selectedEventIndex]?.type === 'currentChange'"
            class="function-template-full"
          >
            <pre
              class="template-line"
            ><span >const {{ eventList[selectedEventIndex]?.functionName }} = (data, node) => {</span></pre>
            <pre class="template-line user-code-marker">
    // {{ t("formDesigner.propertyPanel.events.codeCommentInsertHere") }}</pre
            >
            <el-input
              v-model="currentEventCode"
              type="textarea"
              :rows="6"
              :placeholder="
                t('formDesigner.propertyPanel.events.eventCodePlaceholder')
              "
              class="code-editor inline-editor"
            />
            <pre class="template-line">}</pre>
          </div>
          <div
            v-else-if="
              eventList[selectedEventIndex]?.type === 'nodeExpand' ||
              eventList[selectedEventIndex]?.type === 'nodeCollapse'
            "
            class="function-template-full"
          >
            <pre
              class="template-line"
            ><span >const {{ eventList[selectedEventIndex]?.functionName }} = (data, node, nodeComponent) => {</span></pre>
            <pre class="template-line user-code-marker">
    // {{ t("formDesigner.propertyPanel.events.codeCommentInsertHere") }}</pre
            >
            <el-input
              v-model="currentEventCode"
              type="textarea"
              :rows="6"
              :placeholder="
                t('formDesigner.propertyPanel.events.eventCodePlaceholder')
              "
              class="code-editor inline-editor"
            />
            <pre class="template-line">}</pre>
          </div>
          <!-- 其他事件的简单模板 -->
          <div v-else class="function-template-full">
            <pre
              class="template-line"
            ><span v-if="isFormEventMode">const {{ eventList[selectedEventIndex]?.functionName }} = () => {</span><span v-else>const {{ eventList[selectedEventIndex]?.functionName }} = (value, event, formData) => {</span></pre>
            <pre class="template-line user-code-marker">
    // {{ t("formDesigner.propertyPanel.events.codeCommentInsertHere") }}</pre
            >
            <el-input
              v-model="currentEventCode"
              type="textarea"
              :rows="6"
              :placeholder="
                t('formDesigner.propertyPanel.events.eventCodePlaceholder')
              "
              class="code-editor inline-editor"
            />
            <pre class="template-line">}</pre>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button @click="eventDialogVisible = false">{{
        t("formDesigner.propertyPanel.events.cancel")
      }}</el-button>
      <el-button type="primary" @click="saveEvents">{{
        t("formDesigner.propertyPanel.events.save")
      }}</el-button>
    </template>
  </el-dialog>

  <!-- 树形数据编辑器对话框 -->
  <TreeDataEditor
    v-model="treeDataDialogVisible"
    :tree-type="currentTreeType"
    :json-data="treeDataText"
    @save="handleTreeDataSave"
  />
</template>

<script setup>
import { ref, computed, watch } from "vue";
import { QuestionFilled, Delete } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
import TreeDataEditor from "./TreeDataEditor.vue";

// 国际化
const { t } = useI18n();

// 获取事件描述
const getEventDescription = (eventType) => {
  const descriptions = {
    input: "当输入框的值发生变化时触发",
    change: "当输入框失去焦点或用户按下回车时触发",
    focus: "当输入框获得焦点时触发",
    blur: "当输入框失去焦点时触发",
    click: "当组件被点击时触发",
    keydown: "当键盘按键被按下时触发",
    keyup: "当键盘按键被释放时触发",
    clear: "在点击由 clearable 属性生成的清空按钮时触发",
  };
  return descriptions[eventType] || "未知事件类型";
};

// Props
const props = defineProps({
  selectedItem: {
    type: Object,
    default: null,
  },
  formConfig: {
    type: Object,
    default: () => ({}),
  },
  selectedGridColumn: {
    type: String,
    default: "",
  },
});

// Emits
const emit = defineEmits([
  "addOption",
  "removeOption",
  "updateGridColumns",
  "update-history",
  "clear-field-value",
]);

// 当前激活的tab
const activeTab = ref("component");

// 当前激活的折叠面板
const activeCollapse = ref("basic");

// 标签宽度单位选项
const labelWidthUnits = ref(["px", "%", "auto"]);
const currentLabelWidthUnit = ref("px");

// 表单配置标签宽度单位选项
const formLabelWidthUnits = ref(["px", "%", "auto"]);
const currentFormLabelWidthUnit = ref("px");

// 解析标签宽度值和单位
const parseLabelWidth = (value) => {
  if (!value || value === "auto") {
    return { number: "", unit: "auto" };
  }
  const match = value.toString().match(/^(\d*\.?\d*)(.*)$/);
  if (match) {
    return {
      number: match[1] || "",
      unit: match[2] || "px",
    };
  }
  return { number: value, unit: "px" };
};

// 标签宽度数值部分
const labelWidthNumber = computed({
  get() {
    if (!props.selectedItem?.labelWidth) return "";
    return parseLabelWidth(props.selectedItem.labelWidth).number;
  },
  set(value) {
    if (currentLabelWidthUnit.value === "auto") {
      props.selectedItem.labelWidth = "auto";
    } else {
      if (value) {
        props.selectedItem.labelWidth = value + currentLabelWidthUnit.value;
      } else {
        props.selectedItem.labelWidth = null;
      }
    }
  },
});

// 监听选中项变化，更新当前单位
const updateCurrentUnit = () => {
  if (props.selectedItem?.labelWidth) {
    const parsed = parseLabelWidth(props.selectedItem.labelWidth);
    currentLabelWidthUnit.value = parsed.unit;
  }
};

// 根据单位获取占位符
const getPlaceholderByUnit = (unit) => {
  switch (unit) {
    case "px":
      return "100";
    case "%":
      return "20";
    case "auto":
      return "auto";
    default:
      return "100";
  }
};

// 表单配置标签宽度数值部分
const formLabelWidthNumber = computed({
  get() {
    if (!props.formConfig?.labelWidth) return "";
    return parseLabelWidth(props.formConfig.labelWidth).number;
  },
  set(value) {
    if (currentFormLabelWidthUnit.value === "auto") {
      props.formConfig.labelWidth = "auto";
    } else {
      if (value) {
        props.formConfig.labelWidth = value + currentFormLabelWidthUnit.value;
      } else {
        props.formConfig.labelWidth = null;
      }
    }
  },
});

// 监听表单配置变化，更新当前单位
const updateFormCurrentUnit = () => {
  if (props.formConfig?.labelWidth) {
    const parsed = parseLabelWidth(props.formConfig.labelWidth);
    currentFormLabelWidthUnit.value = parsed.unit;
  }
};

// 切换表单配置标签宽度单位
const switchFormUnit = () => {
  const currentIndex = formLabelWidthUnits.value.indexOf(
    currentFormLabelWidthUnit.value
  );
  const nextIndex = (currentIndex + 1) % formLabelWidthUnits.value.length;
  currentFormLabelWidthUnit.value = formLabelWidthUnits.value[nextIndex];

  if (currentFormLabelWidthUnit.value === "auto") {
    props.formConfig.labelWidth = "auto";
  } else {
    // 根据单位类型设置合适的默认值
    let defaultValue = null;
    if (!defaultValue) {
      switch (currentFormLabelWidthUnit.value) {
        case "px":
          defaultValue = "100";
          break;
        case "%":
          defaultValue = "20";
          break;
        case "auto":
          defaultValue = "auto";
          break;
        default:
          defaultValue = "100";
      }
    }
    props.formConfig.labelWidth =
      defaultValue + currentFormLabelWidthUnit.value;
  }
};

// 切换单位
const switchUnit = () => {
  const currentIndex = labelWidthUnits.value.indexOf(
    currentLabelWidthUnit.value
  );
  const nextIndex = (currentIndex + 1) % labelWidthUnits.value.length;
  currentLabelWidthUnit.value = labelWidthUnits.value[nextIndex];

  if (currentLabelWidthUnit.value === "auto") {
    props.selectedItem.labelWidth = "auto";
  } else {
    // 根据单位类型设置合适的默认值
    let defaultValue = null;
    if (!defaultValue) {
      switch (currentLabelWidthUnit.value) {
        case "px":
          defaultValue = "100";
          break;
        case "%":
          defaultValue = "20";
          break;
        case "auto":
          defaultValue = "auto";
          break;
        default:
          defaultValue = "100";
      }
    }
    props.selectedItem.labelWidth = defaultValue + currentLabelWidthUnit.value;
  }
};

// 监听选中项变化
computed(() => {
  if (props.selectedItem) {
    updateCurrentUnit();
  }
  return props.selectedItem;
});

// 监听表单配置变化
computed(() => {
  if (props.formConfig) {
    updateFormCurrentUnit();
  }
  return props.formConfig;
});

// 监听字段名称变化，自动更新placeholder
watch(
  () => props.selectedItem?.label,
  (newLabel, oldLabel) => {
    if (props.selectedItem && newLabel && newLabel !== oldLabel) {
      props.selectedItem.placeholder = `${t(
        "formDesigner.propertyPanel.placeholders.input"
      )}${newLabel}`;
    }
  }
);

// 监听selectedItem的required变化，设置默认触发时机
watch(
  () => props.selectedItem?.required,
  (newRequired) => {
    if (newRequired && props.selectedItem && !props.selectedItem.trigger) {
      props.selectedItem.trigger = "change";
    }
    // 通知父组件更新历史状态
    emit("update-history");
  },
  { immediate: true }
);

// 监听selectedItem变化，为新选中的组件设置默认触发时机和事件配置
watch(
  () => props.selectedItem,
  (newItem) => {
    if (newItem) {
      if (newItem.type === "grid" || newItem.type === "descriptions") {
        // 栅格布局组件配置
        activeCollapse.value = "properties";
      } else {
        // 重置折叠面板为基础配置
        activeCollapse.value = "basic";
      }

      // 设置默认触发时机
      if (newItem.required && !newItem.trigger) {
        newItem.trigger = "change";
      }
      // 初始化事件配置对象
      if (!newItem.events) {
        newItem.events = {
          input: "",
          change: "",
          focus: "",
          blur: "",
          click: "",
          keydown: "",
          keyup: "",
        };
      }
    }
  },
  { immediate: true }
);

// 监听滑块组件的range属性变化，自动更新表单数据类型
watch(
  () => props.selectedItem?.range,
  (newRange, oldRange) => {
    if (
      props.selectedItem &&
      props.selectedItem.type === "slider" &&
      newRange !== oldRange
    ) {
      const fieldName = props.selectedItem.field;
      if (
        fieldName &&
        props.formModel &&
        props.formModel.hasOwnProperty(fieldName)
      ) {
        if (newRange) {
          // 切换到范围模式，将单个值转换为数组
          const currentValue = props.formModel[fieldName];
          if (typeof currentValue === "number") {
            props.formModel[fieldName] = [0, currentValue || 50];
          } else if (!Array.isArray(currentValue)) {
            props.formModel[fieldName] = [0, 50];
          }
        } else {
          // 切换到单值模式，将数组转换为单个值
          const currentValue = props.formModel[fieldName];
          if (Array.isArray(currentValue)) {
            props.formModel[fieldName] =
              currentValue[1] || currentValue[0] || 0;
          } else if (typeof currentValue !== "number") {
            props.formModel[fieldName] = 0;
          }
        }
        // 通知父组件更新历史状态
        emit("update-history");
      }
    }
  }
);

// 计算属性
const isGridColumnSelected = computed(() => {
  return props.selectedGridColumn && props.selectedGridColumn.includes("-");
});

const selectedGridColumnIndex = computed(() => {
  if (!props.selectedGridColumn) return -1;
  const parts = props.selectedGridColumn.split("-");
  return parts.length > 1 ? parseInt(parts[1]) : -1;
});

// 组件类型名称映射
const getComponentTypeName = () => {
  if (isGridColumnSelected.value) {
    return `${t("formDesigner.componentPanel.componentTypeNames.layoutGrid")}`;
  }

  const typeMap = {
    input: `${t("formDesigner.componentPanel.componentTypeNames.input")}`,
    textarea: `${t("formDesigner.componentPanel.componentTypeNames.textarea")}`,
    number: `${t("formDesigner.componentPanel.componentTypeNames.number")}`,
    select: `${t("formDesigner.componentPanel.componentTypeNames.select")}`,
    cascader: `${t("formDesigner.componentPanel.componentTypeNames.cascader")}`,
    radio: `${t("formDesigner.componentPanel.componentTypeNames.radio")}`,
    checkbox: `${t("formDesigner.componentPanel.componentTypeNames.checkbox")}`,
    date: `${t("formDesigner.componentPanel.componentTypeNames.date")}`,
    switch: `${t("formDesigner.componentPanel.componentTypeNames.switch")}`,
    slider: `${t("formDesigner.componentPanel.componentTypeNames.slider")}`,
    grid: `${t("formDesigner.componentPanel.componentTypeNames.grid")}`,
    tree: `${t("formDesigner.componentPanel.componentTypeNames.tree")}`,
    treeselect: `${t(
      "formDesigner.componentPanel.componentTypeNames.treeselect"
    )}`,
    descriptions: `${t(
      "formDesigner.componentPanel.componentTypeNames.descriptions"
    )}`,
  };
  return typeMap[props.selectedItem?.type] || props.selectedItem?.type;
};

// 添加选项
const addOption = () => {
  emit("addOption");
};

// 删除选项
const removeOption = (index) => {
  emit("removeOption", index);
};

// 添加验证规则
const addValidationRule = () => {
  if (!props.selectedItem.validationRules) {
    props.selectedItem.validationRules = [];
  }
  props.selectedItem.validationRules.push({
    type: "",
    value: "",
    message: "",
    trigger: "change",
  });
};

// 删除验证规则
const removeValidationRule = (index) => {
  if (props.selectedItem.validationRules) {
    props.selectedItem.validationRules.splice(index, 1);
  }
};

// 更新列宽
const updateColumnSpan = (colIndex, span) => {
  emit("updateGridColumns", colIndex, span);
};

// autosize 相关计算属性和方法
const autosizeEnabled = computed({
  get() {
    return !!props.selectedItem?.autosize;
  },
  set(value) {
    if (value) {
      // 启用时设置为 true
      props.selectedItem.autosize = true;
    } else {
      // 禁用时设置为 false
      props.selectedItem.autosize = false;
    }
  },
});

// 处理 autosize 开关变化
const handleAutosizeChange = (value) => {
  if (value) {
    // 启用时默认设置为 true
    props.selectedItem.autosize = true;
  } else {
    // 禁用时设置为 false
    props.selectedItem.autosize = false;
  }
};

// 切换 autosize 模式（简单模式 <-> 高级模式）
const toggleAutosizeMode = () => {
  if (typeof props.selectedItem.autosize === "boolean") {
    // 从简单模式切换到高级模式
    props.selectedItem.autosize = {
      minRows: 2,
      maxRows: 6,
    };
  } else {
    // 从高级模式切换到简单模式
    props.selectedItem.autosize = true;
  }
};

// 栅格布局相关方法
const addGridColumn = () => {
  emit("updateGridColumns", "add");
};

const removeGridColumn = (index) => {
  emit("updateGridColumns", "remove", index);
};

// 事件配置弹窗相关
const eventDialogVisible = ref(false);
const selectedEventIndex = ref(-1);
const currentEventCode = ref("");

// 可用的事件类型
// 根据组件类型返回可用的事件类型
const availableEvents = computed(() => {
  if (!props.selectedItem) {
    return [];
  }

  const componentType = props.selectedItem.type;

  // 数字输入组件的事件、文本域的事件
  if (componentType === "number" || componentType === "textarea") {
    return [
      {
        type: "input",
        label: t("formDesigner.propertyPanel.events.inputEvent"),
        functionName: "handleInput",
      },
      {
        type: "change",
        label: t("formDesigner.propertyPanel.events.valueChange"),
        functionName: "handleChange",
      },
      {
        type: "focus",
        label: t("formDesigner.propertyPanel.events.focus"),
        functionName: "handleFocus",
      },
      {
        type: "blur",
        label: t("formDesigner.propertyPanel.events.blur"),
        functionName: "handleBlur",
      },
    ];
  }

  // 日期选择器
  if (componentType === "date") {
    return [
      {
        type: "change",
        label: t("formDesigner.propertyPanel.events.valueChange"),
        functionName: "handleChange",
      },
      {
        type: "focus",
        label: t("formDesigner.propertyPanel.events.focus"),
        functionName: "handleFocus",
      },
      {
        type: "blur",
        label: t("formDesigner.propertyPanel.events.blur"),
        functionName: "handleBlur",
      },
    ];
  }

  // 选择器的事件
  if (componentType === "select") {
    return [
      {
        type: "change",
        label: t("formDesigner.propertyPanel.events.valueChange"),
        functionName: "handleChange",
      },
      {
        type: "focus",
        label: t("formDesigner.propertyPanel.events.focus"),
        functionName: "handleFocus",
      },
      {
        type: "blur",
        label: t("formDesigner.propertyPanel.events.blur"),
        functionName: "handleBlur",
      },
      {
        type: "clear",
        label: t("formDesigner.propertyPanel.events.clearEvent"),
        functionName: "handleClear",
      },
      {
        type: "visibleChange",
        label: t("formDesigner.propertyPanel.events.visibilityChange"),
        functionName: "handleVisibleChange",
      },
      {
        type: "removeTag",
        label: t("formDesigner.propertyPanel.events.removeTag"),
        functionName: "handleRemoveTag",
      },
    ];
  }

  // 级联选择器的事件
  if (componentType === "cascader") {
    return [
      {
        type: "change",
        label: t("formDesigner.propertyPanel.events.valueChange"),
        functionName: "handleChange",
      },
      {
        type: "focus",
        label: t("formDesigner.propertyPanel.events.focus"),
        functionName: "handleFocus",
      },
      {
        type: "blur",
        label: t("formDesigner.propertyPanel.events.blur"),
        functionName: "handleBlur",
      },
      {
        type: "clear",
        label: t("formDesigner.propertyPanel.events.clearEvent"),
        functionName: "handleClear",
      },
      {
        type: "visibleChange",
        label: t("formDesigner.propertyPanel.events.visibilityChange"),
        functionName: "handleVisibleChange",
      },
      {
        type: "removeTag",
        label: t("formDesigner.propertyPanel.events.removeTag"),
        functionName: "handleRemoveTag",
      },
      {
        type: "expandChange",
        label: t("formDesigner.propertyPanel.events.expandStateChange"),
        functionName: "handleExpandChange",
      },
    ];
  }

  // 单选框的事件
  if (
    componentType === "radio" ||
    componentType === "checkbox" ||
    componentType === "switch"
  ) {
    return [
      {
        type: "change",
        label: t("formDesigner.propertyPanel.events.valueChange"),
        functionName: "handleChange",
      },
    ];
  }

  // 滑块的事件
  if (componentType === "slider") {
    return [
      {
        type: "change",
        label: t("formDesigner.propertyPanel.events.valueChange"),
        functionName: "handleChange",
      },
      {
        type: "input",
        label: t("formDesigner.propertyPanel.events.inputEvent"),
        functionName: "handleInput",
      },
    ];
  }

  // 树形控件的事件
  if (componentType === "tree") {
    return [
      {
        type: "nodeClick",
        label: t("formDesigner.propertyPanel.events.nodeClick"),
        functionName: "handleNodeClick",
      },
      {
        type: "checkChange",
        label: t("formDesigner.propertyPanel.events.checkboxChange"),
        functionName: "handleCheckChange",
      },
      {
        type: "check",
        label: t("formDesigner.propertyPanel.events.nodeCheckboxClick"),
        functionName: "handleCheck",
      },
      {
        type: "currentChange",
        label: t("formDesigner.propertyPanel.events.currentNodeChange"),
        functionName: "handleCurrentChange",
      },
      {
        type: "nodeExpand",
        label: t("formDesigner.propertyPanel.events.nodeExpand"),
        functionName: "handleNodeExpand",
      },
      {
        type: "nodeCollapse",
        label: t("formDesigner.propertyPanel.events.nodeCollapse"),
        functionName: "handleNodeCollapse",
      },
    ];
  }

  // 树形选择器的事件
  if (componentType === "treeselect") {
    return [
      {
        type: "change",
        label: t("formDesigner.propertyPanel.events.valueChange"),
        functionName: "handleChange",
      },
      {
        type: "focus",
        label: t("formDesigner.propertyPanel.events.focus"),
        functionName: "handleFocus",
      },
      {
        type: "blur",
        label: t("formDesigner.propertyPanel.events.blur"),
        functionName: "handleBlur",
      },
      {
        type: "clear",
        label: t("formDesigner.propertyPanel.events.clearEvent"),
        functionName: "handleClear",
      },
      {
        type: "visibleChange",
        label: t("formDesigner.propertyPanel.events.visibilityChange"),
        functionName: "handleVisibleChange",
      },
      {
        type: "removeTag",
        label: t("formDesigner.propertyPanel.events.removeTag"),
        functionName: "handleRemoveTag",
      },
      {
        type: "nodeClick",
        label: t("formDesigner.propertyPanel.events.nodeClick"),
        functionName: "handleNodeClick",
      },
      {
        type: "checkChange",
        label: t("formDesigner.propertyPanel.events.checkboxChange"),
        functionName: "handleCheckChange",
      },
      {
        type: "check",
        label: t("formDesigner.propertyPanel.events.nodeCheckboxClick"),
        functionName: "handleCheck",
      },
      {
        type: "currentChange",
        label: t("formDesigner.propertyPanel.events.currentNodeChange"),
        functionName: "handleCurrentChange",
      },
      {
        type: "nodeExpand",
        label: t("formDesigner.propertyPanel.events.nodeExpand"),
        functionName: "handleNodeExpand",
      },
      {
        type: "nodeCollapse",
        label: t("formDesigner.propertyPanel.events.nodeCollapse"),
        functionName: "handleNodeCollapse",
      },
    ];
  }

  // 其他组件的通用事件
  return [
    {
      type: "input",
      label: t("formDesigner.propertyPanel.events.inputEvent"),
      functionName: "handleInput",
    },
    {
      type: "change",
      label: t("formDesigner.propertyPanel.events.valueChange"),
      functionName: "handleChange",
    },
    {
      type: "focus",
      label: t("formDesigner.propertyPanel.events.focus"),
      functionName: "handleFocus",
    },
    {
      type: "blur",
      label: t("formDesigner.propertyPanel.events.blur"),
      functionName: "handleBlur",
    },
    {
      type: "click",
      label: t("formDesigner.propertyPanel.events.clickEvent"),
      functionName: "handleClick",
    },
    {
      type: "keydown",
      label: t("formDesigner.propertyPanel.events.keyDown"),
      functionName: "handleKeydown",
    },
    {
      type: "keyup",
      label: t("formDesigner.propertyPanel.events.keyUp"),
      functionName: "handleKeyup",
    },
    {
      type: "clear",
      label: t("formDesigner.propertyPanel.events.clearEvent"),
      functionName: "handleClear",
    },
  ];
});

// 可用的表单事件类型
const availableFormEvents = [
  {
    type: "submit",
    label: t("formDesigner.propertyPanel.events.formSubmit"),
    functionName: "handleSubmit",
  },
  {
    type: "reset",
    label: t("formDesigner.propertyPanel.events.formReset"),
    functionName: "handleReset",
  },
  {
    type: "validate",
    label: t("formDesigner.propertyPanel.events.formValidate"),
    functionName: "handleValidate",
  },
  {
    type: "validateField",
    label: t("formDesigner.propertyPanel.events.fieldValidate"),

    functionName: "handleValidateField",
  },
  {
    type: "clearValidate",
    label: t("formDesigner.propertyPanel.events.clearValidate"),
    functionName: "handleClearValidate",
  },
];

// 当前事件列表
const eventList = ref([]);

// 当前表单事件列表
const formEventList = ref([]);

// 打开事件配置弹窗
const openEventDialog = () => {
  if (!props.selectedItem || !props.selectedItem.events) {
    return;
  }

  // 初始化事件列表
  eventList.value = [];
  Object.keys(props.selectedItem.events).forEach((eventType) => {
    const eventConfig = availableEvents.value.find((e) => e.type === eventType);
    if (eventConfig && props.selectedItem.events[eventType]) {
      eventList.value.push({
        ...eventConfig,
        code: props.selectedItem.events[eventType],
      });
    }
  });

  selectedEventIndex.value = -1;
  currentEventCode.value = "";
  isFormEventMode.value = false;
  eventDialogVisible.value = true;
};

// 打开表单事件配置弹窗
const openFormEventDialog = () => {
  if (!props.formConfig || !props.formConfig.events) {
    return;
  }

  // 初始化表单事件列表
  formEventList.value = [];
  Object.keys(props.formConfig.events).forEach((eventType) => {
    const eventConfig = availableFormEvents.find((e) => e.type === eventType);
    if (eventConfig && props.formConfig.events[eventType]) {
      formEventList.value.push({
        ...eventConfig,
        code: props.formConfig.events[eventType],
      });
    }
  });

  // 使用同一个事件列表和弹窗，但切换数据源
  eventList.value = formEventList.value;
  selectedEventIndex.value = -1;
  currentEventCode.value = "";
  isFormEventMode.value = true;
  eventDialogVisible.value = true;
};

// 新增事件相关状态
const selectedEventType = ref("");

// 标识当前是否在配置表单事件
const isFormEventMode = ref(false);

// 通过下拉选择添加事件
const addEventByType = (eventType) => {
  if (!eventType) return;

  const availableEventsList = isFormEventMode.value
    ? availableFormEvents
    : availableEvents.value;
  const eventConfig = availableEventsList.find((e) => e.type === eventType);
  if (eventConfig) {
    const newEvent = {
      ...eventConfig,
      code: "",
    };

    eventList.value.push(newEvent);
    selectedEventIndex.value = eventList.value.length - 1;
    currentEventCode.value = "";
  }

  // 清空选择器
  selectedEventType.value = "";
};

// 获取可用的事件类型
const getAvailableEventTypes = computed(() => {
  const usedEventTypes = eventList.value.map((e) => e.type);
  const availableEventsList = isFormEventMode.value
    ? availableFormEvents
    : availableEvents.value;
  return availableEventsList.filter((e) => !usedEventTypes.includes(e.type));
});

// 选择事件
const selectEvent = (index) => {
  selectedEventIndex.value = index;
  currentEventCode.value = eventList.value[index]?.code || "";
};

// 删除事件
const removeEvent = (index) => {
  eventList.value.splice(index, 1);
  if (selectedEventIndex.value === index) {
    selectedEventIndex.value = -1;
    currentEventCode.value = "";
  } else if (selectedEventIndex.value > index) {
    selectedEventIndex.value--;
  }
};

// 保存事件配置
const saveEvents = () => {
  // 更新当前选中事件的代码
  if (selectedEventIndex.value >= 0) {
    eventList.value[selectedEventIndex.value].code = currentEventCode.value;
  }

  let savedCount = 0;

  if (isFormEventMode.value) {
    // 保存表单事件
    if (!props.formConfig || !props.formConfig.events) {
      return;
    }

    // 清空原有表单事件配置
    Object.keys(props.formConfig.events).forEach((key) => {
      props.formConfig.events[key] = "";
    });

    // 应用新的表单事件配置
    eventList.value.forEach((event) => {
      if (event.code.trim()) {
        props.formConfig.events[event.type] = event.code.trim();
        savedCount++;
      }
    });
  } else {
    // 保存组件事件
    if (!props.selectedItem || !props.selectedItem.events) {
      return;
    }

    // 清空原有事件配置
    Object.keys(props.selectedItem.events).forEach((key) => {
      props.selectedItem.events[key] = "";
    });

    // 应用新的事件配置
    eventList.value.forEach((event) => {
      if (event.code.trim()) {
        props.selectedItem.events[event.type] = event.code.trim();
        savedCount++;
      }
    });
  }

  eventDialogVisible.value = false;

  // 显示保存成功提示
  if (savedCount > 0) {
    ElMessage.success(`已保存 ${savedCount} 个事件配置`);
  } else {
    ElMessage.info("未检测到有效的事件代码");
  }
};

// 监听当前事件代码变化
watch(currentEventCode, (newCode) => {
  if (selectedEventIndex.value >= 0) {
    eventList.value[selectedEventIndex.value].code = newCode;
  }
});

// 获取已配置的事件数量
const getConfiguredEventsCount = () => {
  if (!props.selectedItem?.events) return 0;
  return Object.values(props.selectedItem.events).filter(
    (code) => code && code.trim()
  ).length;
};

// 获取已配置的表单事件数量
const getFormConfiguredEventsCount = () => {
  if (!props.formConfig?.events) return "";
  const count = Object.values(props.formConfig.events).filter(
    (code) => code && code.trim()
  ).length;
  return count > 0 ? "(" + count + ")" : "";
};

// 验证规则规则值类型
const getValidationRuleValueType = (selectedItem, rule) => {
  if (
    selectedItem.type === "input" &&
    (rule.type === "minLength" || rule.type === "maxLength")
  ) {
    return "number";
  }
  if (selectedItem.type === "select" || selectedItem.type === "treeselect") {
    return "number";
  }
  if (selectedItem.type === "number" && rule.type !== "custom") {
    return "number";
  }
  return "text";
};

// 日期组件更改选择器类型
const changeDateType = (selectItem) => {
  // 清空对应字段的值，避免格式不兼容导致的报错
  emit("clear-field-value", selectItem.field);

  if (
    selectItem.dateType === "date" ||
    selectItem.dateType === "dates" ||
    selectItem.dateType === "daterange"
  ) {
    selectItem.format = "YYYY-MM-DD";
  } else if (
    selectItem.dateType === "datetime" ||
    selectItem.dateType === "datetimerange"
  ) {
    selectItem.format = "YYYY-MM-DD HH:mm:ss";
  } else if (
    selectItem.dateType === "year" ||
    selectItem.dateType === "years" ||
    selectItem.dateType === "yearrange"
  ) {
    selectItem.format = "YYYY";
  } else if (
    selectItem.dateType === "month" ||
    selectItem.dateType === "months" ||
    selectItem.dateType === "monthrange"
  ) {
    selectItem.format = "YYYY-MM";
  } else if (selectItem.dateType === "week") {
    selectItem.format = "[Week] WW";
  }

  // 通知父组件更新历史状态
  emit("update-history");
};

// 日期组件更改是否多选
const changeDateMultiple = (selectItem) => {
  // 清空对应字段的值，避免格式不兼容导致的报错
  emit("clear-field-value", selectItem.field);
  if (selectItem.multiple) {
    selectItem.dateType = "dates";
  } else {
    selectItem.dateType = "date";
  }
  selectItem.format = "YYYY-MM-DD";
};

// 处理激活值类型变化
const handleActiveValueTypeChange = (type) => {
  if (type === "boolean") {
    props.selectedItem.activeValue = true;
  } else if (type === "number") {
    props.selectedItem.activeValue = 1;
  } else {
    props.selectedItem.activeValue = "true";
  }
  emit("update-history");
};

// 处理未激活值类型变化
const handleInactiveValueTypeChange = (type) => {
  if (type === "boolean") {
    props.selectedItem.inactiveValue = false;
  } else if (type === "number") {
    props.selectedItem.inactiveValue = 0;
  } else {
    props.selectedItem.inactiveValue = "false";
  }
  emit("update-history");
};

// 处理滑块最小值变化
const handleMinValueChange = (value) => {
  if (value !== null && value !== undefined) {
    // 如果最小值大于最大值，自动调整最大值
    if (
      props.selectedItem.max !== null &&
      props.selectedItem.max !== undefined &&
      value > props.selectedItem.max
    ) {
      props.selectedItem.max = value;
      ElMessage.warning("最大值已自动调整为最小值");
    }
  }
  emit("update-history");
};

// 处理滑块最大值变化
const handleMaxValueChange = (value) => {
  if (value !== null && value !== undefined) {
    // 如果最大值小于最小值，自动调整最小值
    if (
      props.selectedItem.min !== null &&
      props.selectedItem.min !== undefined &&
      value < props.selectedItem.min
    ) {
      props.selectedItem.min = value;
      ElMessage.warning("最小值已自动调整为最大值");
    }
  }
  emit("update-history");
};

// 日期组件更改范围选择
const changeDateRangeable = (selectItem) => {
  // 清空对应字段的值，避免格式不兼容导致的报错
  emit("clear-field-value", selectItem.field);
  if (selectItem.rangeable) {
    selectItem.dateType = "daterange";
  }
};

// 树形数据编辑器相关状态
const treeDataDialogVisible = ref(false);
const currentTreeType = ref("");
const treeDataText = ref("");

// 打开树形数据编辑器
const openTreeDataEditor = (type) => {
  currentTreeType.value = type;
  const currentData = props.selectedItem.data || [];
  treeDataText.value = JSON.stringify(currentData, null, 2);
  treeDataDialogVisible.value = true;
};

// 处理树形数据保存
const handleTreeDataSave = (parsedData, type) => {
  if (type === "tree" || type === "treeSelect") {
    props.selectedItem.data = parsedData;
  } else if (type === "cascader") {
    props.selectedItem.options = parsedData;
  } else if (type === "descriptions") {
    props.selectedItem.items = parsedData;
  }
  emit("update-history");
};

// 清除树形数据
const clearTreeData = () => {
  props.selectedItem.data = [];
  emit("update-history");
  ElMessage.success(t("message.operationSuccess"));
};

// 清除级联数据
const clearCascaderData = () => {
  props.selectedItem.options = [];
  emit("update-history");
  ElMessage.success(t("message.operationSuccess"));
};

// 清除描述数据
const clearDescriptionsData = () => {
  props.selectedItem.items = [];
  emit("update-history");
  ElMessage.success(t("message.operationSuccess"));
};

// 级联选择器数据编辑器相关方法
// 打开级联选择器数据编辑器
const openCascaderDataEditor = (type) => {
  currentTreeType.value = type;
  const currentData = props.selectedItem.options || [];
  treeDataText.value = JSON.stringify(currentData, null, 2);
  treeDataDialogVisible.value = true;
};

// 打开描述项配置编辑器
const openDescriptionsItemEditor = (type) => {
  currentTreeType.value = type;
  const currentData = props.selectedItem.items || [];
  treeDataText.value = JSON.stringify(currentData, null, 2);
  treeDataDialogVisible.value = true;
};
</script>

<style lang="less" scoped>
.validation-rule-item {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 4px;
  background-color: var(--el-fill-color-lighter);
}

.rule-row {
  width: 100%;
}
.designer-properties {
  width: 300px;
  background: var(--el-bg-color);
  border-left: 1px solid var(--el-border-color-lighter);
  overflow-y: auto;
}

:deep(.el-collapse-item__content) {
  padding-bottom: 0 !important;
}

/* 标签宽度输入框样式 */
.label-width-input {
  display: flex;
  align-items: center;
}

.width-number-input {
  flex: 1;
}

.width-number-input :deep(.el-input__wrapper) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.unit-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
  height: 24px;
  background-color: var(--el-fill-color-light);
  border: 1px solid var(--el-border-color);
  border-left: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: var(--el-text-color-regular);
  transition: all 0.3s;
  user-select: none;
}

.unit-selector:hover {
  background-color: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.property-panel {
  padding: 9px 16px 16px 16px;
}

.option-item {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

.no-selection {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 200px;
  color: var(--el-text-color-secondary);
}

.grid-columns {
  .grid-column-item {
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 8px;
    background: var(--el-fill-color-light);
    min-width: 200px;
    transition: all 0.3s;
    cursor: pointer;

    &:hover {
      border-color: var(--el-border-color);
    }

    &.active {
      border-color: var(--el-color-primary);
      background-color: var(--el-color-primary-light-9);
    }

    .column-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      font-size: 12px;
      font-weight: 500;
    }

    .el-form-item {
      margin-bottom: 0;
    }

    .el-slider {
      width: 100%;
    }
  }
}

/* autosize 配置样式 */
.autosize-config {
  .autosize-options {
    margin-top: 12px;
    padding: 12px;
    background-color: var(--el-fill-color-lighter);
    border-radius: 4px;
    border: 1px solid var(--el-border-color-light);

    .autosize-row {
      display: flex;
      align-items: center;
      margin-bottom: 8px;

      label {
        font-size: 12px;
        color: var(--el-text-color-regular);
        margin-right: 8px;
      }

      .el-input-number {
        flex: 1;
      }
    }

    .el-button {
      margin-top: 8px;
      width: 100%;
    }
  }

  .autosize-simple {
    margin-top: 12px;

    .el-button {
      width: 100%;
    }
  }
}

/* 树形数据编辑器样式 */
.tree-data-editor {
  .editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;

    .editor-title {
      font-weight: 500;
      color: var(--el-text-color-primary);
    }
  }

  .tree-data-textarea {
    font-family: "Courier New", monospace;
    font-size: 13px;

    :deep(.el-textarea__inner) {
      font-family: "Courier New", monospace;
      font-size: 13px;
      line-height: 1.4;
    }
  }

  .data-format-tip {
    background-color: var(--el-fill-color-lighter);
    border: 1px solid var(--el-border-color-light);
    border-radius: 4px;
    padding: 16px;
    font-size: 13px;

    h4 {
      margin: 0 0 12px 0;
      color: var(--el-text-color-primary);
      font-size: 14px;
    }

    p {
      margin: 6px 0;
      color: var(--el-text-color-regular);
      line-height: 1.5;

      code {
        background-color: var(--el-fill-color-light);
        padding: 2px 4px;
        border-radius: 3px;
        font-family: "Courier New", monospace;
        font-size: 12px;
        color: var(--el-color-danger);
      }
    }

    .format-example {
      background-color: var(--el-fill-color-dark);
      color: var(--el-text-color-primary);
      padding: 12px;
      border-radius: 4px;
      font-family: "Courier New", monospace;
      font-size: 12px;
      line-height: 1.4;
      margin: 8px 0 0 0;
      overflow-x: auto;
    }
  }
}

/* 事件配置弹窗样式 */
.event-dialog-content {
  display: flex;
  height: 400px;
  gap: 16px;
}

.event-list {
  width: 250px;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}

.event-list-header {
  padding: 12px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  background-color: var(--el-fill-color-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
}

.event-items {
  flex: 1;
  overflow-y: auto;
}

.event-item {
  padding: 12px;
  border-bottom: 1px solid var(--el-border-color-extra-light);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s;
}

.event-item:hover {
  background-color: var(--el-fill-color-light);
}

.event-item.active {
  background-color: var(--el-color-primary-light-9);
  border-color: var(--el-color-primary);
  color: var(--el-color-primary);
}

.event-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.event-help-icon {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  cursor: help;
}

.event-help-icon:hover {
  color: var(--el-color-primary);
}

.event-editor {
  flex: 1;
  border: 1px solid var(--el-border-color-lighter);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 完整模板样式 */
.function-template-full {
  font-family: "Courier New", monospace;
  font-size: 13px;
  line-height: 1.5;
  background-color: var(--el-fill-color-lighter);
  border: 1px solid var(--el-border-color-light);
  border-radius: 4px;
  padding: 12px;
}

.template-line {
  margin: 2px 0;
  color: var(--el-text-color-regular);
  white-space: pre;
}

.user-code-marker {
  color: var(--el-color-success);
  font-style: italic;
  margin: 8px 0 4px 0;
}

.inline-editor {
  margin: 4px 0 8px 0;
  font-family: "Courier New", monospace;
  font-size: 13px;
}

.inline-editor .el-textarea__inner {
  background-color: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: 3px;
  padding: 8px;
  font-family: "Courier New", monospace;
  font-size: 13px;
  line-height: 1.4;
}

.event-editor-header {
  padding: 12px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  background-color: var(--el-fill-color-light);
  font-weight: 500;
}

.event-editor-content {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  min-height: 0;
}

.function-template {
  font-family: "Courier New", monospace;
  font-size: 14px;
  color: var(--el-text-color-regular);
  background-color: var(--el-fill-color-light);
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--el-border-color-lighter);
}

.function-template pre,
.template-line pre {
  margin: 0;
  padding: 0;
  white-space: pre;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
}

pre.function-template,
pre.template-line {
  margin: 0;
  padding: 2px 0;
  white-space: pre;
  font-family: "Courier New", monospace;
  font-size: 14px;
  color: var(--el-text-color-regular);
  background: none;
  border: none;
  line-height: 1.4;
}

.code-editor {
  flex: 1;
}

.code-editor .el-textarea__inner {
  font-family: "Courier New", monospace;
  font-size: 14px;
  line-height: 1.5;
  resize: none;
}

.json-editor {
  font-family: "Consolas", "Monaco", "Courier New", monospace !important;
  line-height: 1.4;
}

.json-validation {
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.json-validation.success {
  background-color: var(--el-color-success-light-9);
  color: var(--el-color-success);
  border: 1px solid var(--el-color-success-light-7);
}

.json-validation.error {
  background-color: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
  border: 1px solid var(--el-color-danger-light-7);
}

/* 数据预览样式 */
.data-preview {
  margin-top: 8px;
  padding: 4px;
  background-color: var(--el-fill-color-light);
  border-radius: 4px;
  border: 1px solid var(--el-border-color-lighter);
}

.preview-text {
  font-size: 12px;
  color: var(--el-text-color-regular);
}
</style>
